vue2和vue3的响应式区别

vue响应式依赖的函数

vue2

vue2中依赖es5的Object.defineProperty 属性，该方法可以在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。监听的是对象的属性值。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj: 要在其上定义属性的对象。
prop: 要定义或修改的属性的名称。
descriptor: 将被定义或修改的属性的描述符。

 vue3

vue3中依赖的是es6的proxy和Reflect属性。

  Proxy（代理） 可以创建一个代理对象。它能够实现对其他对象的代理，Proxy 只能代理对象，无法代理非对象值，例如字符串、布尔值等。类似于一个拦截器，所有关于该对象的操作都会先经过proxy的代理。

  Reflect（反射）1.进行队原数据的数据操作。防止js的单线程将框架卡死。可以通过Reflect的返回值来判断是否成功，防止出现大量的try catch。

语法

let proxy = new Proxy(target, handler)

参数

target —— 是要包装的对象，可以是任何东西，包括函数。
handler —— 代理配置：带有“钩子”（“traps”，即拦截操作的方法）的对象。比如 get 钩子用于读取target属性，set 钩子写入 target 属性等等。

原理
let proxy = new Proxy （object ,{ 
    get(a,b) { return Reflect.get(a,b) }    // a是object的原对象， b是操作的属性。用 a[b]获得对象劫持代理
    set(a,b,c) {return Reflect.get(a,b,c) }  // a是object的原对象， b是操作的属性, c是修改的值，用 a[b] = c 来改变原数据的值。 修改，增加都是依靠set
 }）
 // 修改删除类似操作进行数据劫持