一，vue2.x的响应式

1.实现原理

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

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

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

2.存在问题

• 新增属性，删除属性，界面不会更新

• 直接通过下表修改数组，界面不会自动更新

二，Vue3.0的响应式

1.实现原理

• 通过Proxy(代理):拦截对象中任意属性的变化，包括：属性值的读写，属性的添加，删除等等

• 通过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)
    }
})

data.name = '666'