Vue2响应式原理

• 一、核心流程：
• 二、Vue2响应式的缺点
• 三、Vue3中的Proxy

一、核心流程：

1. 数据劫持：通过Object.defineProperty()将data选项中的所有属性转变为响应式，添加getter和setter
2. 依赖管理：
   • 依赖收集：访问数据时，触发getter，将渲染watcher或者计算属性watcher或者侦听器watcher添加到相应的Dep依赖列表中
   • 依赖更新：修改数据触发setter，Dep通知依赖列表中的所有watcher执行更新逻辑（重新渲染视图或者执行回调）

二、Vue2响应式的缺点

1. 无法检查对象新添加或者删除的属性，不会触发响应式更新，只能通过Vue.set或者Vue.delete
2. 无法检测数组某一项的修改和数组长度的修改，可以通过Vue提供的数组变异方法，比如push,slice或者通过Vue.set

三、Vue3中的Proxy

Vue3中使用Proxy进行了改造，可以直接监听整个对象的变化，无需递归遍历