还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样做：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
下面的例子以此结束这篇博客：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue对象更改检测注意事项例子</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="add()">添加</button>
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
items:{
name:"daming"
}
},
methods:{
add(){
Vue.set(this.items,'age', 20);
//this.$set(this.items,"age",20); 两者是等价的
}
}
})
</script>
</body>
</html>
可以同时添加多个属性如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue对象更改检测注意事项例子</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="add()">添加</button>
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
items:{
name:"daming"
}
},
methods:{
add(){
this.items = Object.assign({},this.items,{
age:20,
sex:"male"
})
}
}
})
</script>
</body>
</html>