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 已经做过响应式处理了，只会把它当做一个普通的对象来对待。

所以，在实际开发中，要随时打开开发者工具，小心翼翼检查数据属性是不是都是响应式的，有没有在哪里没对接好新属性，引入了非响应式属性。

Vue 响应式原理

Vue 响应式原理

Vue 响应式基础

初始化

追加新的数据

推荐阅读更多精彩内容