vue2和vue3中的响应式对比

vue2 的响应式

• 核心：
  • 对象：通过 defineProperty 对对象的已有属性值的读取和修改进行劫持（监视/拦截）
  • 数组：通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
• 问题：
  • 对象直接新添加的属性或者删除已有的属性，界面不会自动更新
  • 直接通过下标替换元素或者更新 length,界面不会自动更新
    后面就有了$set 方法来实现数据的响应式操作

---

vue3 的响应式

通过 Proxy 和 Reflect 的配合来实现了监视及数据的响应式操作

• 通过 Proxy(代理)：拦截对 data 的任意属性的任意（13 种）操作，包括属性的读写、添加和删除等；cont p = new Proxy(target, handler) handler 用来监视数据的变化，内部还要配合 Reflect 实现
• 通过 Reflect(反射)：动态对被代理对象的相应属性进行特定的操作；所谓反射就是你给我这个事物，我可以把这个事物的内部东西再给你；通过反射对象可以将当前代理对象或者目标对象当中相关的属性、属性值或者属性的操作直接给你返回过来；Reflect 是个内置对象，不能 new 的，它里面所有的相关方法得通过调用它的静态方法才行或者说叫直接调用

---

所有的付出都不会白费，今天的付出都是未来的积累

vue3代码及文档学习