vue2.x于vue3.x响应式的对比

vue2.x于vue3.x响应式的对比

vue2.x的响应式

对象：依赖Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）

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

缺点：①通过对象.属性名新增属性、delete 对象.属性名 删除属性，界面不会自动更新，

　　　需要通过this.$set(obj,key,value)或者Vue.set(obj,key,value)修改和this.$delete(obj,key,value)或者Vue.delete(obj,key,value)删除；

　　　②直接通过修改数组下标数组元素，界面不会自动更新，需要通过以下一系列方法实现

• • 　　push()
  • 　　pop()
  • 　　shift()
  • 　　unshift()
  • 　　splice()
  • 　　sort()
  • 　　reverse()

vue3.x的响应式

实现原理：

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

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

vue2.x的缺点不能实现响应式的操作方法，在vue3.x中可以直接使用且能实现响应式

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'