Vue中數組與對象修改觸發頁面更新的機制與原理解析
Vue中關於數組與對象修改觸發頁面更新的機制與原理簡析
相關問題
數組
使用索引直接賦值與直接修改數組length時，不會觸發頁面更新。
例如：
<script>
export default {
name: "HomeView",
data: () => ({
list1: ["A", "B"],
}),
methods: {
btnClicked() {
this.list1[0] = "C"
this.list1[2] = "C"
},
},
}
</script>
或是
<script>
export default {
name: "HomeView",
data: () => ({
list1: [{ text: "123" }, { text: "456" }],
}),
methods: {
btnClicked() {
this.list1[0] = { text: "789" }
},
},
}
</script>
頁面並不會觸發更新。
對象
頁面初始化完成後，在方法中直接對data內聲明對象當前不存在的屬性進行賦值來為對象新增屬性時，頁面也不會響應渲染。
例如：
<script>
export default {
name: "HomeView",
data: () => ({
obj1: { a: "a", b: "b" },
}),
methods: {
btnClicked() {
this.obj1.c = "c"
},
},
}
</script>
頁面並不會觸發更新。
原因
Vue在初始化時會將data內所有的屬性嵌套遍歷並重寫其Getter和Setter方法，借此實現響應式屬性。
然而對於在頁面渲染完成後加入data的屬性，Vue並不會將其變為響應式。
一些深入的探究
數組
Vue對於數組是僅將其對應下標的對象的屬性變為響應式，而這個下標本身是無法成為響應式的。
data: () => ({
list1: [{ text: "123" }, { text: "456" }],
})
使用如上的data聲明。
方法A：
this.list1[0] = { text: "789" }
方法B：
this.list1[0].text = "789"
方法B可以被正確響應而方法A不可以。
方法A將數組下標為0的位置替換為瞭一個新的對象，而因為數組下標不是響應式的，因此沒有觸發頁面刷新。
同時，由於數組下標為0的位置替換為瞭一個新的對象，而這個新的對象並沒有被配置為響應式，那對於這個對象屬性的修改也不會觸發頁面更新。如下：
this.list1[0] = { text: "789" }
this.list1[0].text = "456"
由於新的對象的屬性並沒有被配置為響應式，那麼即使對這個對象的屬性進行修改，頁面也不會被更新。
既然下標本身無法成為響應式，不妨嘗試：
<script>
export default {
name: "HomeView",
data: () => ({
list1: ["A", "B"],
}),
methods: {
btnClicked() {
this.list1[0] = "C"
},
},
}
</script>
通過下標修改數組的對應值也無法觸發視圖更新。
對象
data: () => ({
obj1: { a: { text: "a" }, b: { text: "b" } },
}),
使用如上的data聲明。
this.obj1.a = { text: "c" }
成功觸發視圖更新。
與數組下標不同，對象的屬性在初始化是被定義為響應式的，因此直接對屬性賦值對象是能夠觸發視圖更新的。不像對數組的對應下標賦值而不會觸發視圖更新。
解決方案
數組
1. 內置API
如果需要向數組加入新的成員，則可以直接使用數組的push方法。
此外，下列數組方法也可以自動的觸發視圖刷新：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
2. 將數組重新賦值，修改引用地址
為數組新增一個字符串成員"C"
this.list1 = this.list1.concat(["C"])
由於list1是data的屬性，list1的引用發生改變，就會觸發視圖更新。
修改數組的第一個值
let tempList = this.list1.concat([]) // 深拷貝，等價於一個新數組，使用slice，JSON都可以。 tempList[0] = "666" this.list1 = tempList
通過原數組新建一個新數組，修改新數組後再將新數組賦值給原數組，由於原數組作為data的屬性，其引用被修改，觸發視圖更新。
3. Vue.$set() 方法
使用Vue.$set可以為data對象添加一個新的響應式屬性，且觸發視圖更新。
定義：
Vue.$set(對象或數組, 對象屬性名或數組下標, 值)
向list1對象的0索引位置賦值一個新的響應式對象，同時觸發視圖更新：
Vue.$set(this.list1, 0, { text: "789" })
如果在組件中應使用this.$set來代替：
this.$set(this.list1, 0, { text: "789" })
對象
1. 將對象重新賦值，修改引用地址
思路與數組的類同。
使用JSON、手寫遞歸、lodash深拷貝均可，但如果對象內含方法，則不能使用JSON來完成深拷貝。
深拷貝完成後修改對應屬性後賦值給原對象即可。
2. Vue.$set() 方法
對象同樣可以使用$set() 方法修改。
定義：
Vue.$set(對象或數組, 對象屬性名或數組下標, 值)
將obj1對象的a屬性賦值為字符串"b"並觸發視圖更新：
Vue.$set(this.obj1, a, "b")
如果在組件內，則應使用：
this.$set(this.obj1, a, "b")
到此這篇關於Vue中關於數組與對象修改觸發頁面更新的機制與原理簡析的文章就介紹到這瞭,更多相關Vue數組與對象修改觸發頁面更新內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！