Vue新增資料檢視不更新問題
摘要：
當我們把一個數據傳給Vue例項data屬性完成檢視更新時，經過一番操作發現並沒有更新。 console 打印發現資料只是JavaScript普通物件資料。
原因是因為Vue想要完成檢視響應必須把JavaScript普通物件資料轉為具有 getter/setter 的屬性物件資料。當呼...
當我們把一個數據傳給Vue例項data屬性完成檢視更新時，經過一番操作發現並沒有更新。 console 打印發現資料只是JavaScript普通物件資料。
原因是因為Vue想要完成檢視響應必須把JavaScript普通物件資料轉為具有 getter/setter 的屬性物件資料。當呼叫 setter 被呼叫時Vue捕獲資料從而完成響應元件更新。 Vue.js - 深入響應式原理
檢測變化
允許建立檢視響應的方式有：
- 在Vue例項data中新增初始屬性值作為響應節點
- 通過$set方法動態新增響應節點
例項
首先我們準備兩組資料，， jsData 和 vueData 。
const jsData = {
ja: "張三",
jb: "李四"
}
export default {
data() {
return {
vueData: {
va: "張三",
vb: "李四"
}
}
},
mounted() {
console.log(jsData, this.vueData);
},
// ...
}
複製程式碼
執行可以看出 jsData 不在vue例項內建立，不具備 getter/setter ， vueData 通過vue例項內data屬性建立初始屬性值從而具備 getter/setter 。
不允許更新
檢視監測不到變化的例項如下：
export default {
// ...
mounted() {
console.log(jsData, this.vueData);
this.notAllow()
},
methods: {
notAllow() {
// demo 1
this.vueData.newKeyA = "keyA";
console.log(this.vueData);
// demo 2
// Object.assign(this.vueData, { newKeyA: "keyA" });
// console.log(this.vueData);
// demo 3
// this.vueData = Object.assign(this.vueData, { newKeyA: "keyA" });
// console.log(this.vueData);
}
}
}
複製程式碼
上述程式碼中都有一個問題，在同一個 引用型別 中插入資料，導致資料物件本身沒有改變，也就意味著Vue檢查不到資料記憶體指向做更改，這就會導致插入的只是不具備 getter/setter 的屬性。
執行結果：
允許更新
export default {
mounted() {
console.log(jsData, this.vueData);
this.allow()
},
allow() {
// demo 1
this.vueData = {
...this.vueData,
newKeyA: "keyA"
}
console.log(this.vueData);
// demo 2
// this.$set(this.vueData, "newKeyA", "keyA");
// console.log(this.vueData);
}
}
複製程式碼
上述demo1的方式是替換一個記憶體指向完成資料變化。 demo2是通過Vue例項提供的$set方法, 在不改變內指向的同時，新增一個的具備 getter/setter 屬性做了補充。
執行結果：
