vue2与vue3响应式原理介绍_vue2和vue3的响应式原理

vue2与vue3响应式原理介绍

---

---

概念

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一、vue2响应式原理

通过 Object.defineProperty 遍历对象的每一个属性，把每一个属性变成一个 getter 和 setter 函数，读取属性的时候调用 getter，给属性赋值的时候就会调用 setter.
当运行 render 函数的时候,发现用到了响应式数据，这时候就会运行 getter 函数，然后 watcher（发布订阅）就会记录下来。当响应式数据发生变化的时候，就会调用 setter 函数，watcher 就会再记录下来这次的变化，然后通知 render 函数，数据发生了变化，然后就会重新运行 render 函数，重新生成虚拟 dom 树。

代码展示

通过添加后发现控制台打印了，但页面并未渲染
Vue.set 和 this.$set的关系this.$set 实例方法，该方法是全局方法 Vue.set 的一个别名
this.$set(this.person,‘sex’,‘男’)
Vue.set(this.person,‘sex’,‘男’)

注：

二、 Vue3中的响应式原理

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

通过Reffect（反射）： 对源对象的属性进行操作

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)
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

proxy
Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量（保持不变的语义）。

const p = new Proxy(target, handler)

1
2

参数：
target：
要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler：
一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

Reffect
Reflect是一个组合的对象，它提供了阻止 JavaScript 操作的方法。Reflect不是一个函数对象，因此它是不可构造的。

在reffect身上，就有defineProperty()这个方法

const p = new Proxy(person, {        //创建代理
      // 查
      get(target,propName){
          console.log(`有人读取了p身上的${propName}`)
          return target[propName];  
          //反射
          return Reflect.get(target,propName)
      },
      // 改 增
      set(target, propName, value){
          console.log(`有人修改了p身上的${propName}属性`);
          target[propName] = value;
      },
      // 删
      deleteProperty(target, propName){
          console.log(`有人删除了p身上的${propName}属性`)
          return delete target[propName];
      },
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

不管是通过p对象对person对象进行增删改查任意一种操作，都能监测到，同时数据也能得到更新，对比起Vue2来说，确实真正意义上实现了数据的完全式响应。

而在Vue3数据的更新是proxy配合Reffect来实现的，在上述代码中，我只展示了通过Reffect来读取属性值，剩下的都是原生的数代理。

总结

以上就是Vue3中数据想响应式的原理，在Vue2中，数据响应式主要借助Object.defineProperty()来实现，存在的缺陷是无法操作数据的增加和删除，在Vue3中，数据响应式主要借助proxy和Reffect配合实现，可以做到实现数据的增删改查。