Vue中關(guān)于數(shù)組與對(duì)象修改觸發(fā)頁(yè)面更新的機(jī)制與原理簡(jiǎn)析

相關(guān)問(wèn)題

數(shù)組

使用索引直接賦值與直接修改數(shù)組length時(shí)，不會(huì)觸發(fā)頁(yè)面更新。

例如：

<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>

頁(yè)面并不會(huì)觸發(fā)更新。

對(duì)象

頁(yè)面初始化完成后，在方法中直接對(duì)data內(nèi)聲明對(duì)象當(dāng)前不存在的屬性進(jìn)行賦值來(lái)為對(duì)象新增屬性時(shí)，頁(yè)面也不會(huì)響應(yīng)渲染。

例如：

<script>
export default {
    name: "HomeView",
    data: () => ({
        obj1: { a: "a", b: "b" },
    }),
    methods: {
        btnClicked() {
            this.obj1.c = "c"
        },
    },
}
</script>

頁(yè)面并不會(huì)觸發(fā)更新。

原因

Vue在初始化時(shí)會(huì)將data內(nèi)所有的屬性嵌套遍歷并重寫(xiě)其Getter和Setter方法，借此實(shí)現(xiàn)響應(yīng)式屬性。

然而對(duì)于在頁(yè)面渲染完成后加入data的屬性，Vue并不會(huì)將其變?yōu)轫憫?yīng)式。

一些深入的探究

數(shù)組

Vue對(duì)于數(shù)組是僅將其對(duì)應(yīng)下標(biāo)的對(duì)象的屬性變?yōu)轫憫?yīng)式，而這個(gè)下標(biāo)本身是無(wú)法成為響應(yīng)式的。

data: () => ({
        list1: [{ text: "123" }, { text: "456" }],
})

使用如上的data聲明。

方法A：

this.list1[0] = { text: "789" }

方法B：

this.list1[0].text = "789"

方法B可以被正確響應(yīng)而方法A不可以。

方法A將數(shù)組下標(biāo)為0的位置替換為了一個(gè)新的對(duì)象，而因?yàn)閿?shù)組下標(biāo)不是響應(yīng)式的，因此沒(méi)有觸發(fā)頁(yè)面刷新。

同時(shí)，由于數(shù)組下標(biāo)為0的位置替換為了一個(gè)新的對(duì)象，而這個(gè)新的對(duì)象并沒(méi)有被配置為響應(yīng)式，那對(duì)于這個(gè)對(duì)象屬性的修改也不會(huì)觸發(fā)頁(yè)面更新。如下：

this.list1[0] = { text: "789" }
this.list1[0].text = "456"

由于新的對(duì)象的屬性并沒(méi)有被配置為響應(yīng)式，那么即使對(duì)這個(gè)對(duì)象的屬性進(jìn)行修改，頁(yè)面也不會(huì)被更新。

既然下標(biāo)本身無(wú)法成為響應(yīng)式，不妨嘗試：

<script>
export default {
    name: "HomeView",
    data: () => ({
        list1: ["A", "B"],
    }),
    methods: {
        btnClicked() {
            this.list1[0] = "C"
        },
    },
}
</script>

通過(guò)下標(biāo)修改數(shù)組的對(duì)應(yīng)值也無(wú)法觸發(fā)視圖更新。

對(duì)象

data: () => ({
        obj1: { a: { text: "a" }, b: { text: "b" } },
}),

使用如上的data聲明。

this.obj1.a = { text: "c" }

成功觸發(fā)視圖更新。

與數(shù)組下標(biāo)不同，對(duì)象的屬性在初始化是被定義為響應(yīng)式的，因此直接對(duì)屬性賦值對(duì)象是能夠觸發(fā)視圖更新的。不像對(duì)數(shù)組的對(duì)應(yīng)下標(biāo)賦值而不會(huì)觸發(fā)視圖更新。

解決方案

數(shù)組

1. 內(nèi)置API

如果需要向數(shù)組加入新的成員，則可以直接使用數(shù)組的push方法。

此外，下列數(shù)組方法也可以自動(dòng)的觸發(fā)視圖刷新：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

2. 將數(shù)組重新賦值，修改引用地址

為數(shù)組新增一個(gè)字符串成員"C"

this.list1 = this.list1.concat(["C"])

由于list1是data的屬性，list1的引用發(fā)生改變，就會(huì)觸發(fā)視圖更新。

修改數(shù)組的第一個(gè)值

let tempList = this.list1.concat([]) // 深拷貝，等價(jià)于一個(gè)新數(shù)組，使用slice，JSON都可以。
tempList[0] = "666"
this.list1 = tempList

通過(guò)原數(shù)組新建一個(gè)新數(shù)組，修改新數(shù)組后再將新數(shù)組賦值給原數(shù)組，由于原數(shù)組作為data的屬性，其引用被修改，觸發(fā)視圖更新。

3. Vue.$set() 方法

使用Vue.$set可以為data對(duì)象添加一個(gè)新的響應(yīng)式屬性，且觸發(fā)視圖更新。

定義：

Vue.$set(對(duì)象或數(shù)組, 對(duì)象屬性名或數(shù)組下標(biāo), 值)

向list1對(duì)象的0索引位置賦值一個(gè)新的響應(yīng)式對(duì)象，同時(shí)觸發(fā)視圖更新：

Vue.$set(this.list1, 0, { text: "789" })

如果在組件中應(yīng)使用this.$set來(lái)代替：

this.$set(this.list1, 0, { text: "789" })

對(duì)象

1. 將對(duì)象重新賦值，修改引用地址

思路與數(shù)組的類(lèi)同。

使用JSON、手寫(xiě)遞歸、lodash深拷貝均可，但如果對(duì)象內(nèi)含方法，則不能使用JSON來(lái)完成深拷貝。

深拷貝完成后修改對(duì)應(yīng)屬性后賦值給原對(duì)象即可。

2. Vue.$set() 方法

對(duì)象同樣可以使用$set() 方法修改。

定義：

Vue.$set(對(duì)象或數(shù)組, 對(duì)象屬性名或數(shù)組下標(biāo), 值)

將obj1對(duì)象的a屬性賦值為字符串"b"并觸發(fā)視圖更新：

Vue.$set(this.obj1, a, "b")

如果在組件內(nèi)，則應(yīng)使用：

this.$set(this.obj1, a, "b")

到此這篇關(guān)于Vue中關(guān)于數(shù)組與對(duì)象修改觸發(fā)頁(yè)面更新的機(jī)制與原理簡(jiǎn)析的文章就介紹到這了,更多相關(guān)Vue數(shù)組與對(duì)象修改觸發(fā)頁(yè)面更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論