Vue零基础高效学习②.①：Vue2 与 Vue3 区别与联系之对【变量、数组、对象】的【修改、监测】

Vue2

如何使用

对象

Vue2只能对整个对象的变更监测到
只更改某个key-value需要参考下面方法：

Vue.set(this.object, 'keyName', 'value') //需import vue
this.$set(this.object, 'keyName', 'value') //同上
this.object = Object.assign({}, this.object, { a: 1, b: 2 })//添加多个k-v

数组

Vue2只对替换整个数组能进行监测
单独修改需要参考下面的方法：

• 调用set修改数组

Vue.set(this.array, indexOfItem, newValue)
vm.$set(this.array, indexOfItem, newValue)

• 万能splice

test = [1,2,3,4]
test.splice(0,0,666) //在数组头添加666（从第0位开始，删除0个数据，添加666）
test.splice(3,1) //删除最后一个元素 （从第3位开始删除一个元素）
test.splice(3,1,666) //修改最后一个元素为666（从第3位开始，删除一个元素，添加666）

• 能监测到修改的命令

push() //尾插
pop() //删尾

shift() //删头
unshift() //头插

splice()
sort() // 排序
reverse() //翻转

实现原理

• 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

• 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

  Object.defineProperty(data, 'count', {
      get () {}, 
      set () {}
  })
  

• 存在问题：

  • 新增属性、删除属性, 界面不会更新。
  • 直接通过下标修改数组, 界面不会自动更新。

Vue3

如何使用

Vue3通过proxy和Reflect实现
需要通过响应式的引用ref和reactive

import { reactive, ref } from 'vue'

// reactive 处理对象
const state = reactive({
  count: 0
}) 
state.count=1 // 可以直接修改

// ref处理基本类型数据
let count = ref(0)
count.value = 1 //需要修改value下的值

vscode折叠代码：

#region
#endregion

模板字符串

//js
let name = 'esword';
let sayHello = `Hello! My name is ${name}.

<!-- vue模板语法-->
<span>Message: {{ msg }}</span>

实现原理

• 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

• 通过Reflect（反射）: 对源对象的属性进行操作。

• MDN文档中描述的Proxy与Reflect：

  • Proxy：https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

  • Reflect：https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

代码原理：

  new Proxy(data, {
  	// 拦截读取属性值
      get (target, prop) {
      	return Reflect.get(target, prop)
      },
      // 拦截设置属性值或添加新属性
      set (target, prop, value) {
      	return Reflect.set(target, prop, value)
      },
      // 拦截删除属性
      deleteProperty (target, prop) {
      	return Reflect.deleteProperty(target, prop)
      }
  })
  
  proxy.name = 'tom'