Vue3-组合式Api和响应式原理解读（三）_响应式数据的原理

实现响应式的原理

1. 首先要监听到数据的变化
2. 设置拦截，读取的时候收集到数据，设置的时候通过派发来更新数据

Vue2与Vue3响应式原理对比

vue2实现响应式：

对象：通过递归来遍历每个属性,采用Object.defindproperty来劫持getter(),setter()函数

数组：通过函数拦截方式,覆盖原型数组,(后面新增this.$set)

vue3实现响应式：es6新增proxy,Reflect搭配使用

Proxy语法以及使用

es6阮一峰_Proxy🐅🐅🐅 MDN_Proxy传送门🐂🐂🐂

const p = new Proxy(target, handler)

• target 被proxy代理的模板对象
• handler 捕捉器(处理器对象)
  • handler.get() 属性读取操作的捕捉器。(读取)
  • handler.set() 属性设置操作的捕捉器。(修改/新增)
  • handler.deleteProperty() delete 操作符的捕捉器。(删除)

Reflect语法以及使用

Reflect用法传送门

• Reflect用法

  • Reflect.get(target, propertyKey[, receiver]) 获取对象身上某个属性的值，类似于 target[name]。
  • Reflect.set(target, propertyKey, value) 将值分配给属性的函数。
  • Reflect.deleteProperty(target, propertyKey)

  作为函数的delete操作符，相当于执行 delete target[name]。

     proxy：Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
     Reflect: Reflect是一个内置的对象，它提供拦截 JavaScript 操作的方法。不是一个函数对象，因此它是不可构造的。
     因此,vue3响应式数据通过Proxy以及Reflect结合,来拦截和操作对象，来实现响应式数据

    const p = new Proxy(targetObj, {   // targetObj 需要设置响应式的目标对象
      get(target, key) { // 读取数据
          console.log('get函数触发', target, key)
          return Reflect.get(target, key) // 通过Reflect.get(target, key)来获取值
      },
      set(target, key, value,) {  // 操作数据(修改/新增)
          console.log('set函数触发', target, key,value)
          return Reflect.set(target, key, value) //通过Reflect.set(target, key,value)来分配属性
      }),
      deleteProperty(target, key) { // 执行删除对象熟悉操作 delete
           console.log('deleteProperty函数触发', target, key)
           return Reflect.deleteProperty(target, key) 
      }
   }

下一节

computed和watch的理解

> 记录不易，希望能得到您的一个小手手，点赞👍是我坚持下去的动力
> 一起加油吧，如果理解错误，还请指正，尽快修改，谢谢大家