Vue中為對象添加屬性沒有更新到視圖當(dāng)中触徐，但是通過Vue devtools 數(shù)據(jù)會發(fā)生變化
我們在項(xiàng)目開發(fā)的過程中，經(jīng)常會遇到這種情況：為data中的某一個對象添加一個屬性关翎，該對象已經(jīng)有了這個屬性负拟，但是視圖層上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不能監(jiān)聽對象屬性的添加和刪除，因?yàn)樵趘ue組件初始化的過程中鲤脏，會調(diào)用getter和setter方法们颜，所以該屬性必須是存在在data中，視圖層才會響應(yīng)該數(shù)據(jù)的變化猎醇。
解決方法：
1.把a(bǔ)ge屬性添加到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);
},
}
此時點(diǎn)擊按鈕就有了
第三種和第四種方法此時age多了get和set方法，所以此時我們再次操作該屬性的時候硫嘶，就會引起視圖的更新啦
