[学习笔记]Vue2和Vue3响应式原理区别

1.Vue2的响应式原理:

通过Object.defineProperty()对数据进行劫持，调用set&&get方法操作数据后返回，当读取对象中属性时会调用get方法，修改调用set方法，缺点:无法观测到删除数据和新增数据的变化，官方也给了解决方案:this.$Set()或者this.$forceUpdate()强制更新dom

Vue2响应式的简易实现：

      //源数据
      let person = {
        name: "zhangsan",
        age: 18,
        height: 188,
      };

      //vue2的响应式
      let p = {};

      for (let key in person) {
        Object.defineProperty(p, key, {
          get() {
            console.log(`读取了${key}属性`);
            return person.key;
          },
          set(value) {
            console.log(`修改了${key}属性，更新页面`);
            person.key = value;
          },
        });
      }

2.Vue3的响应式原理:

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

        2.通过Reflect（反射）: 对源对象的属性进行操作

Reflect其中某些方法与Object相同，如defineProperty()等，Reflect让Object操作都变成函数行为

Vue3的基本实现：

      let person = {
        name: "zhangsan",
        age: 18,
        height: 188,
      };    
       
        const p = new Proxy(person,{
        set(target,propName,value){
            console.log(`设置${propName}值为${value}`)
            // target[propName] = value

            Reflect.set(target,propName,value)
        },
        //target:原数据  propName:参数名
        get(target,propName){
            console.log(`读取${propName}属性`)
            // return target[propName]
            return Reflect.get(target,propName)
        },
        //property 待删除的属性名
        deleteProperty(target,property){
            console.log(`删除${property}属性`)
            // return delete target[property]
            return Reflect.deleteProperty(target,property)
        }
    })