在Vue中，一般只有在data选项中声明的属性（或者是属性的属性）才是具有响应特性的。如果需要在data选项之外对已有属性添加（Vue 不允许动态添加根级响应式属性）具有响应特性的属性，需要用到Vue的set方法。
var vm = new Vue({
data: {
a: { //a就是根级属性，不可动态添加
b: 0 //b就是属性的属性，可以动态添加
}
}
})
何为响应特性？就是当我们更改data中的值的时候，HTML与之绑定的部分会随之更新的特性。
例1，Vue文档中的例子
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
例1中的a就是在data中声明的具有响应特性的属性，而b就不是。
例2，把上面的例子修改一下
var vm = new Vue({
data: {
a: {
a1:''
}
},
methods: {
change: function () {
this.a.a1 = "test" //a1就是响应式的
this.a.a2 = "testtest" //a2就不是响应式的
}
}
})
在实际操作中，例2的a2虽然不是响应式的，但他却是可以在HTML部分被渲染更新出来。这里就是一个比较容易掉进去的坑了。由于Vue是异步执行DOM更新，虽然更新的动作是由this.a.a1 = "test"触发，可动作的完成是在this.a.a2 = "testtest"之后。
例3，一个更加完整的例子
var vm = new Vue({
data: {
a: {
a1:''
}
},
methods: {
change: function () {
this.a.a1 = "test" //a1就是响应式的
this.a.a2 = "testtest" //a2就不是响应式的
var that = this;
setTimeout(function () {
that.a.a3 = 'new text'; //这里与a2是相同的，却别在于这里的a3并不会被渲染到DOM中
that.$set(that.a, 'a4', 'new text'); //这是正确的添加属性的方法
that.a = { //这种写法与a2不同，a5可以被更新到DOM中
a5: 'hahaha'
}
}, 1);
}
}
})
参考资料：
