vue2和vue3的响应式

vue2和vue3的响应式之间的区别

1、Vue2的响应式

（1）核心

对象：通过defineProperty对对象的已有属性值的读取和修改进行劫持（拦截）；

数组：通过重写数组更新数组一系列更新元素的方法来了实现元素修改的劫持

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

（2）问题

对象直接新添加的属性或删除已有属性，界面不会自动更新

直接通过下边替换元素或者更新length，界面不会自动更新arr[1] = {}

2、Vue3的响应式

（1）核心

通过Proxy（代理）：拦截对data任意属性的任意（13种操作，包括属性的读写、属性的添加、属性的删除等…）

通过Reflect(反射)：动态对被代理对象的相关属性进行特定的操作

（2）语法

const p = new Proxy(target, handle)
参数：
target:要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组、函数，甚至另一个代理）
handle:一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理p的行为

const proxyUser = new Proxy(user,{
//获取目标对象的某个属性值
 get (target,prop) {
     console.log('get方法被调用了')
     return Reflect.get(target,prop)
 }
 //修改目标对象的属性值，为目标对象添加新的属性
 set (target,prop,val) {
 console.log('set方法调用了')
 return Reflect.set(target,prop,val)
 }
 //删除目标对象上的某个属性
 deleteProperty(target,prop) {
 console.log('delete方法调用了')
 return Reflect.deleteProperty(target,prop)
 
 }
 //通过代理对象获取目标对象中的某个属性值
 console.log(proxyUser.name)
 proxyUser.name = '名人'
 delete proxyUser.name
})

以上将目标对象变成代理对象:

参数1：user==>target目标对象

参数2：handler==>处理器对象，用来监视数据，及数据的操作