Vue 响应式原理
在上一篇文章中，我们发现改了 data 中的数据之后，界面上相应部分也会自动发生变化，那么这就是响应式的。
为什么改了数据，相应的界面就能发生变化呢？这其中的原理到底是什么？
当然， Vue 官网对其响应式原理做了一些介绍，但是个人认为，对于开发者来说，还是省掉了一些重要细节，所以本篇文章将帮助读者重新梳理一遍 Vue 的响应式原理。
Vue 响应式基础
Vue 的响应式是基于 js 中的 getter/setter 来实现的，所以 Vue 能检测到对象属性的变化，而不能检测到属性的添加和删除，这块在官网有比较详细的描述，此处不再用过多示例去描述。
初始化
在组件初始化的时候，会递归地去扫描 data 对象，假设存在组件 A ，其中 data 声明为：
Vue.component('A', {
...
data() {
return {
name: 'yibuyisheng',
phoneNumbers: ['13311111111', '13322222222'],
company: {
code: 'BIDU',
parts: []
}
};
}
...
});
其中，普通属性 name 、 phoneNumbers 、 company 、 code 、 parts ，都会转换成对应的 getter/setter 。
对于数组 phoneNumbers ，是不能通过 phoneNumbers[0] = '13344444444' 去触发界面响应的，这是 js 本身的限制。同时，也不能通过修改 phoneNumbers.length 来触发界面响应 phoneNumbers 数组长度发生了变化 这件事情。为了缓解这两种限制， Vue 内部对一些数组方法进行了覆盖重写：
-
push() / pop() / shift() / unshift()主要应对修改数组长度的限制。 -
sort() / reverse()主要应对修改数组元素内容的限制。 -
splice()同时应对数组内容修改和长度修改的限制。
按照上述这一套走下来，基本就能实现响应式效果了，但是随时要当心：
- 数据属性必须事先声明。
- 对于数组，一定要选用合适的方法更新数据。
如果在开发的时候，不小心在某个环节没遵守上述做法，会给 debug 带来不小的困扰。
追加新的数据
很多时候，我们事先并不会知道所有的属性，并且也不可能在 data 里面把所有属性列举完全，那么就会遇到动态往 data 数据中追加数据的问题了。
首先，按照官网的说法，不能在已经创建的实例上动态添加新的根级响应式属性。比如上例 A 组件中的 data ，不能在初始化之后给 data 添加新的和 phoneNumbers 平级的属性。
所以，只能借助于 Vue 内部提供的 vm.$set 方法给 data 添加非根级属性，比如 vm.$set(this.company, 'address', 'BeiJing') 。
通过 vm.$set 方法添加属性时，会给对应的属性生成相应的 getter/setter ，所以新加的属性会立马变成响应式的。
此时有个问题，如果给 data 新增一个值为对象的属性，那么之后修改该对象上的数据的时候，会触发界面相应部分变化吗？比如，上例 A 组件，新增属性：
this.$set(this.company, 'address', {province: 'BeiJing', city: 'BeiJing', manager: { name: 'zhangsan'}});
后续在点击某个按钮之后，修改新增对象的 province 属性：
this.company.address.province = 'BeiJing1';
此时在界面上能看到相应变化吗？答案是肯定的，因为在调用 vm.$set 的时候， Vue 内部会递归遍历新设置进来的对象，将对象属性生成 getter/setter 形式的，然后就变成了响应式属性了。
Vue 内部会对对象每一层级做标记，以方便检测当前层级的属性是否做过响应式转换了，比如上面新增对象的标记为：
{
province: 'BeiJing',
city: 'BeiJing',
manager: {
name: 'zhangsan',
__ob__: Observer
},
__ob__: Observer
}
可以看出来，两级属性都被转换成了响应式属性。
既然有了这个标记，那么在调用 vm.$set 添加新的属性的时候，就可以检查对应的值对象的根级属性是否有响应式标记，如果有，就不必递归该对象了。正是由于这种检测，会带来一些意想不到的效果。假设在 A 组件的某个方法中，执行了如下代码：
const newObj = {
a: 1,
b: 2,
c: {
d: 3,
e: 4
}
};
this.$set(this.company, 'test1', newObj);
newObj.c.f = 5;
this.$set(this.company, 'test2', newObj);
最终就造成了属性 f 不是响应式的。
当然，此处是一个简化了的例子，很多人应该都能一眼看出来不能直接给已经在 data 上的对象直接添加属性 f ： newObj.c.f = 5; ，而要通过调用 vm.$set 。但是，在实际场景中，这些关键代码不一定都集中在这么紧密的一个地方，而且变量名也会不停地变化，有时候根本意识不到 newObj 已经做过响应式处理了，只会把它当做一个普通的对象来对待。
所以，在实际开发中，要随时打开开发者工具，小心翼翼检查数据属性是不是都是响应式的，有没有在哪里没对接好新属性，引入了非响应式属性。
