vue2与vue3响应式原理

        

目录

1、$set 、$delete

2、静默刷新

3、proxy

4、Reflect 

---

        vue2的响应式原理是通过object.defineProperty来劫持各个属性的setter和getter在数据发生变化的时候发布消息给订阅者，触发响应的监听回调。这里不再对vue2响应原理做过多解释，可以查看往期博客

---

        在vue2中通过object.defineProperty实现响应式原理时新增属性、删除属性界面不会更新；直接通过下标修改数组，界面也不会自动更新（vue2也做了相对解决$set,$delete）;下面来具体介绍$set、$delete和静默刷新

1、$set 、$delete

语法：

1. vm.$set("被设置的对象" , "属性/索引" , "值")
2. vm.$delete("被设置的对象" , "属性/索引")

下面看看直接添加、删除对象属性（代码仅供测试，可忽略）

 可发现对象的sex属性被添加了，age属性被删除了，但是数据未被响应，界面没有更新

 

 可以看出数据的变化会影响到界面的更新

2、静默刷新

    addSex() {
      this.flag = false;
      this.obj.sex = "男"; //不是响应式
      //this.$set(this.obj, "sex", "男"); //是响应式
      console.log("添加性别sex", this.obj);
      this.flag = true;
    },
    delAge() {
      this.flag = false;
      delete this.obj.age; //不是响应式
      //this.$delete(this.obj, "age");  //是响应式
      console.log("删除年龄age", this.obj);
      this.flag = true;
    },

 

 

         可以看出静默刷新利用v-if重新加载节点实现响应刷新页面数据，这样面对大量添加的属性和未知属性也是比较方便的

3、proxy

语法：const p = new proxy("新对象" , "函数对象")

下面看看vue3的新增和删除属性会不会实现界面刷新

 可以看出vue3中对象属性的增加和删除，界面会随之更新，这是因为vue2的响应式为object.defineProperty而vue3是proxy搭配Reflect

   //因为proxy就两个参数，所以怎么判断是哪个属性呢
    const p = new Proxy(obj, {
      get(target, prop) {    //target：对象    prop：属性
        console.log("get:", target, prop);
        return prop;
      },
      set(target, prop, value) {    //target：对象    prop：属性    value：新的值
        console.log("set:", target, prop, value);
        return true;
      },
      deleteProperty(target, prop) {    //删除
        console.log("delete:", target, prop);
        return delete target[prop];
      },
    });

接下来将代码进行优化

下面做一下总结：

• 获取属性调用proxy中的get函数
• 修改和新增调用proxy中的set函数
• 删除调用的 proxy中的deleteProperty函数

而vue3中proxy是和Reflect搭配着使用的，下面来简单介绍下Reflect

4、Reflect 

Reflect直译为映射，官方解释它是一个内置对象，提供拦截js操作的方法，这些方法与proxy handlers的方法相同，Reflect不是一个函数对象，因此它是不可构造的，它的所有属性和方法都是静态的（和Math一样），下面将代码进行改进一下

 那Reflect有什么特点和好处呢？

• 将object对象的一些明显属于语言内部的方法（比如object.defineProperty），放到Reflect对象上，现阶段，某些方法同时在object和Reflect对象上部署，未来的新方法只部署在Reflect对象上，也就是说Reflect可以拿到内部方法
• 修改object方法的返回结果，比如object.defineProperty在无法定义属性时会抛出错误，可用try{...}catch{...}来捕获错误消息，而Reflect直接会返回false
• 让object操作都变成函数行为，某些object操作是命令式的，Reflect会将其变成函数式
• Reflect方法跟Proxy对象的方法是对应的，Proxy的方法在Reflect都能找到，尽管修改了Proxy默认行为，Reflect也是能够获取默认行为的

以上总结参考程序思维

总结：

• 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
• 通过Reflect(反射)：对被代理对象的属性进行操作