Vue中为对象添加属性没有更新到视图当中，但是通过Vue devtools 数据会发生变化
我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性，该对象已经有了这个属性，但是视图层上input输入框并没有更新，为什么？
下面代码.png
<template>
<div class="hello">
<button @click="setMessage">添加属性</button>
{{ student.name }}
<input type="text" v-model="student.age" />
</div>
</template>
<script>
export default {
data() {
return {
student: {
name: "李四",
},
};
},
methods: {
setMessage() {
this.student.age = 15;
},
},
};
</script>
由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。
解决方法：
1.把age属性添加到student对象中
data() {
return {
student: {
name: "李四",
age:"" //在这里添加一个age属性就可以正常更新到视图中
},
};
}
2.在setMessage方法中把整个对象赋值给到student对象中
methods: {
setMessage() {
let newStudent = { name: "李四", age: 15 };
this.student = newStudent ;
console.log(this.student);
},
}
3.使用this.$set(obj, key, value)/vue.set(obj, key, value)
methods: {
setMessage() {
this.$set(this.student, 'age', 15);
console.log(this.student);
},
}
4.通过Object.assign(target, sources)方法
(也是通过对象拷贝赋值，跟第二种方法一样)
methods: {
setMessage() {
this.student.age = 15;
this.student = Object.assign({}, this.student);
console.log(this.student);
},
}
此时点击按钮就有了
第三种和第四种方法此时age多了get和set方法，所以此时我们再次操作该属性的时候，就会引起视图的更新啦
