vue2和3响应式原理-CSDN博客

本文链接：https://blog.csdn.net/xihuanlilia/article/details/124972374

vue2的响应式原理

vue2对象类型的响应式是通过es5的方法 Object.defineProperty() 对
属性进行读取和修改的拦截（数据劫持）
es5方法
Object.defineProperty() 有两个方法
分别为
get（） => 用来获取对象的值
如下

  Object.defineProperty(obj, 'name', {
  get() {
    return _tmpName;
  },
});

set（newVal） => 用来修改
他需要传递一个参数就是修改后的值

 Object.defineProperty(obj, 'name', {
    get() {
      return _tmpName;
    },
   set(newVal) {
    _tmpName = newVal;
   },
  });

通过重写更新数组的一系列方法来实现拦截
对数组的变更方法进行了包裹

新增加属性或是删除属性的时候界面不会更新
直接通过下标修改数组界面不会自动更新

通过proxy 代理
拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
proxy 指的是代理对象他是window身上的一个方法主要用来创建一个对象的代理主要用来监听一个对象的相关操作
代理对象可以监听我们对原对象的操作

Proxy对象需要传入两个参数，分别是需要被Proxy代理的对象和一系列的捕获器

这里最常用的也是 get和set两个方法

这两个方法有两个参数
第一个代表的是代理的函数本身或者说原对象一般为target
第二个代表的是修改或者读取的属性参数名一般为propName

第三个只有set有代表的修改后的值一般为value
在这里插入图片描述
当然他们都要 return 出值

对比于 vue2 的 Object.defineProperty()
proxy拥有自带删除的功能
他的参数和 get一样这里不过多赘述

在这里插入图片描述

Reflect 是一个内置对象，可简化的创建 Proxy。
对于每个可被 Proxy 捕获的内部方法，Reflect 都有一个对应的方法 Reflect，其名称和参数与 Proxy 钩子相同。

因此，我们可以用 Reflect 来将操作转发到原始对象。