Vue2 的响应式原理

Vue2 的响应式原理

1. 数据劫持：Vue2 通过 Object.defineProperty 来将对象的每一个属性转换成 set,get,其中修改对象的属性时，就出触发 ，使用对象的属性时就会触发 get
2. 依赖收集：就是在渲染试图时，将 watcher 和具体的属性，通过发布者订阅的模式管理，这样数据改变，视图也能改变
3. 派发更新：通过 dep 来执行 watcher 的 notify 方法

使用 Object.defineProperty 做响应式的缺点

1. 深度监听，需要一次性递归到底，计算量比较大
2. 描述符中只有 set 和 get,无法监听新增属性和删除属性的操作
3. 无法监听原生数组

解决办法：

当我们通过数组的方法区更改数组时，或者直接删除 data 数据，数据并不能实现响应式，因为 Object.defineProperty 是没有办法处理属性的删除和新增的，因此 Vue2 的响应式通过数组方法(pop,push)或者是删除，vue 是不能监听的，Vue2 中可以通过 vue.datele 和 vue.set 这些 vue 内置 api 来改变属性，实现响应式。或者使用 this.$nextTick()方法等。