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