vue响应式

vue2.x的响应式

1. 实现原理

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

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

Object.defineProperty(data, 'name', {
     get(){
         return person.name
     },
    set(value){
        console.log('有人修改了name属性,被我发现了,我要去更新name属性了')
        person.name = value
    }
})

2. 存在问题

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

vue3.x的响应式

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

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

MDN文档中描述的Proxy与Reflect:

。developer.mozilla.org/zh-CN/docs/…

。developer.mozilla.org/zh-CN/docs/…

    const p = new Proxy(person, {
        //拦截读取属性
        get(target, prop){
            return Reflect.get(target, prop)
        },
        //拦截修改属性或添加属性
        set(target, prop, value){
            return Reflect.set(target, prop, value)
        },
        //拦截删除属性
        deleteproprty(target, prop) {
            return Reflect.deleteproprty(target, prop)
        }
    })

    p.name = 'hi'