vue2 和 vue3 的响应式原理

1.vue2 响应式

• 实现原理
  对象类型：通过 Object.difineProperty() 对属性的读取，修改进行拦截（数据劫持）
  数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹）

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

• 存在问题
  新增属性、删除属性，界面不会更新（需要使用 this.$set 、this.$delete 或Vue.set、Vue.delete）
  直接通过下标修改数组，界面不会自动更新

2.vue3 响应式

• 实现原理
  通过 Proxy（代理）：拦截对象中任意属性的变化，包括：属性值得读写，属性的添加，属性的删除等
  通过 Reflect（反射）：对别代理对象的属性进行操作

模拟vue2中的响应式实现方法

    let person = {
        name: 'zhangsan',
        age: 15
    }

    let p = {}
    Object.defineProperty(p, 'name', {

        get() {
            //读取 name 时调用
            return person.name
        },
        set(newVal) {
            //修改 name 时调用
            console.log('有人修改了name，需要更新界面');
            person.name = newVal;
        }
    })
    console.log(person);
    p.name;
    p.name = 'lisi'
    console.log(person);

模拟vue3中的响应式实现方法

    let person = {
        name: 'zhangsan',
        age: 15
    }
    
   //更智能
   const p = new Proxy(person, {
        //有人读取p的某个属性的时候调用
        get(target, propName) {
            console.log(`有人读取了p身上的${propName}属性`);
            return Reflect.get(target, propName);
        },

        //有人修改p的某个属性、或给p追加某个属性时调用
        set(target, propName, value) {
            console.log(`有人修改了p身上的${propName}属性，去更新界面`);
            return Reflect.set(target, propName, value)
        },

        //删除p身上某个属性的时候调用
        deleteProperty(target, propName) {
            console.log(`有人删除了p身上的${propName}属性，去更新界面`);
            return Reflect.deleteProperty(target, propName)
        } 
    })