【6月日新计划更文活动】第17天

Vue3中的响应式原理

1. Vue2的响应式

实现原理：

• 对象类型： 通过Object.defineProperty()对属性的读取、修改进行拦截 (数据劫持)
• 数组类型： 通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

• Object.defineProperty(data, 'count',{
    get(){},
    set(){}
  })
  

存在问题：

• 新增属性、删除属性，界面不会更新
• 直接通过下标修改数组，界面不会自动更新

2. Vue3的响应式

实现原理：

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

• 通过Reflect(反射)：对被代理源对象的属性进行操作

• MDN 文档中描述的Proxy与Reflect

  • Proxy：Proxy - JavaScript | MDN
  • Reflect： Reflect - JavaScript | MDN

•      const proxy = new Proxy(person, {
         // 拦截读取属性值 读取 
         get(target, propName) {
           // console.log('有人读去了proxy属性', target, b)
           console.log(`有人读取了proxy的 ${propName} 属性`)
           return Reflect.get(target, propName)
           // return target[propName]
         },
         // 拦截设置属性或添加新属性 增改
         set(target, propName, value) {
           console.log(`有人修改了 proxy 的 ${propName} 属性为 ${value}`)
           target[propName] = value
           Reflect.set(target, propName, value)
           // return target[propName]
         },
         // 拦截删除属性 删除
         deleteProperty(target, propName) {
           console.log(`删除了p的${propName}属性`)
           return Reflect.defineProperty(target, propName)
           // return delete target[propName]
         }
       })