Vue2
-
使用数据劫持结合发布-订阅者模式来实现响应式
- 数据劫持：在访问或修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或返回这个结果
-
vue响应式需要三者配合
- Oberserve（数据监听器）：Oberserve的核心是采用object.defineProperty()来实现对数据的监听，递归地给属性绑定getter和setter函数，当属性改变时，通知订阅者
- Watcher（观察者）：作为Oberserve和Compile中的桥梁，订阅Obeserve中属性变化的信息，触发Compile的更新函数
- Compile（指令解析器）：解析模板，将模板中的变量转变成数据，绑定更新函数，添加订阅者
Vue2采用的响应式的缺点
- 对复杂的对象需要深度监听，递归到底，一次计算量大
- 无法监听数组，需要做额外的处理
- 无法监听新增/删除属性
Vue3
- vue3使用es6中的proxy属性·来实现对数据的监听
优点
- 深度监听性能提升：proxy对属性的监听，什么时候用什么时候递归。也就是说proxy对于复杂的对象只会在getter的时候对当前层进行监听，并不会把后面的更深层的属性递归出来
- 能够对数组进行监听
