vue強制元件重新渲染
有時候,依賴 Vue 響應方式來更新資料是不夠的,相反,我們需要手動重新渲染元件來更新資料。或者,我們可能只想拋開當前的DOM,重新開始。那麼,如何讓Vue以正確的方式重新呈現元件呢?
強制 Vue 重新渲染元件的最佳方法是在元件上設定:key
。 當我們需要重新渲染元件時,只需更 key
的值,Vue 就會重新渲染元件。
這是一個非常簡單的解決方案。
當然,你可能會對其他方式會更感興趣:
- 簡單粗暴的方式:重新載入整個頁面
- 不妥的方式:使用
v-if
- 較好的方法:使用Vue的內建
forceUpdate
方法 - 最好的方法:在元件上進行
key
更改
簡單粗暴的方式:重新載入整個頁面
這相當於每次你想關閉應用程式時都要重新啟動你的電腦。
這種方式或許有用,但這是一個非常糟糕的解決方案,不要這樣做,我們來看看更好的方法。
不妥的方式:使用 v-if
v-if
指令,該指令僅在元件為true
時才渲染。 如果為false
,則該元件在DOM中不存在。
來看看,v-if
是怎麼工作的,在template
中,新增v-if
指令:
<template>
<my-component v-if="renderComponent" />
</template>
在script
中,使用nextTick
的方法
<script> export default { data() { return { renderComponent: true, }; }, methods: { forceRerender() { // 從 DOM 中刪除 my-component 元件 this.renderComponent = false; this.$nextTick(() => { // 在 DOM 中新增 my-component 元件 this.renderComponent = true; }); } } }; </script>
上面的過程大致如下:
- 剛開始
renderComponent
設定為true
,因此渲染my-component
元件 - 當我們呼叫
forceRerender
時,我們立即將renderComponent
設定為false
- 我們停止渲染
my-component
,因為v-if
指令現在計算結果為false
- 在
nextTick
方法中將renderComponent
設定回true
- 當
v-if
指令的計算結果為true
時,再次渲染my-component
在這個過程中,有兩個部分比較重要
首先,我們必須等到nextTick
,否則我們不會看到任何變化。
在Vue中,一個 tick 是一個DOM更新週期。Vue將收集在同一 tick 中進行的所有更新,在 tick 結束時,它將根據這些更新來渲染 DOM 中的內容。如果我們不等到next tick,我們對renderComponent
其次,當我們第二次渲染時,Vue將建立一個全新的元件。 Vue 將銷燬第一個,並建立一個新的,這意味著我們的新my-component
將像正常情況一樣經歷其所有生命週期-created
,mounted
等。
另外,nextTick
可以與 promise 一起使用:
forceRerender() {
// 從 DOM 中刪除 my-component 元件
this.renderComponent = false;
this.$nextTick().then(() => {
this.renderComponent = true;
});
}
不過,這並不是一個很好的解決方案,所以,讓我們做 Vue 想讓我們做的
較好的方法:forceUpdate 方法
這是解決這個問題的兩種最佳方法之一,這兩種方法都得到了Vue的官方支援。
通常情況下,Vue 會通過更新檢視來響應依賴項中的更改。然而,當我們呼叫forceUpdate
時,也可以強制執行更新,即使所有依賴項實際上都沒有改變。
下面是大多數人使用這種方法時所犯的最大錯誤。
如果 Vue 在事情發生變化時自動更新,為什麼我們需要強制更新呢?
原因是有時候 Vue 的響應系統會讓人感到困惑,我們認為Vue會對某個屬性或變數的變化做出響應,但實際上並不是這樣。在某些情況下,Vue的響應系統根本檢測不到任何變化。
所以就像上一個方法,如果你需要這個來重新渲染你的元件,可能有一個更好的方法。
有兩種不同的方法可以在元件例項本身和全域性呼叫forceUpdate
:
// 全域性
import Vue from 'vue';
Vue.forceUpdate();
// 使用元件例項
export default {
methods: {
methodThatForcesUpdate() {
// ...
this.$forceUpdate();
// ...
}
}
}
重要提示:這不會更新任何計算屬性,呼叫forceUpdate
僅僅強制重新渲染檢視。
最好的方法:在元件上進行 key
更改
在許多情況下,我們需要重新渲染元件。
要正確地做到這一點,我們將提供一個key
屬性,以便 Vue 知道特定的元件與特定的資料片段相關聯。如果key
保持不變,則不會更改元件,但是如果key
發生更改,Vue 就會知道應該刪除舊元件並建立新元件。
正是我們需要的!
但是首先,我們需要繞一小段路來理解為什麼在Vue中使用key
。
為什麼我們需要在 Vue 中使用 key
一旦你理解了這一點,那麼這是瞭解如何以正確方式強制重新渲染的很小的一步。
假設我們要渲染具有以下一項或多項內容的元件列表:
- 有本地的狀態
- 某種初始化過程,通常在
created
或mounted
鉤子中 - 通過jQuery或普通api進行無響應的DOM操作
如果你對該列表進行排序或以任何其他方式對其進行更新,則需要重新渲染列表的某些部分。 但是,不會希望重新渲染列表中的所有內容,而只是重新渲染已更改的內容。
為了幫助 Vue 跟蹤已更改和未更改的內容,我們提供了一個key
屬性。 在這裡使用陣列的索引,因為索引沒有繫結到列表中的特定物件。
const people = [
{ name: 'Evan', age: 34 },
{ name: 'Sarah', age: 98 },
{ name: 'James', age: 45 },
];
如果我們使用索引將其渲染出來,則會得到以下結果:
<ul>
<li v-for="(person, index) in people" :key="index">
{{ person.name }} - {{ index }}
</li>
</ul>
// Outputs
Evan - 0
Sarah - 1
James - 2
如果刪除Sarah
,得到:
Evan - 0
James - 1
與James
關聯的索引被更改,即使James
仍然是James
。 James
會被重新渲染,這並不是我們希望的。
所以這裡,我們可以使用唯一的 id
來作為 key
const people = [
{ id: 'this-is-an-id', name: 'Evan', age: 34 },
{ id: 'unique-id', name: 'Sarah', age: 98 },
{ id: 'another-unique-id', name: 'James', age: 45 },
];
<ul>
<li v-for="person in people" :key="person.id">
{{ person.name }} - {{ person.id }}
</li>
</ul>
在我們從列表中刪除Sarah
之前,Vue刪除了Sarah
和James
的元件,然後為James
建立了一個新元件。現在,Vue知道它可以為Evan
和James
保留這兩個元件,它所要做的就是刪除Sarah
的。
如果我們向列表中新增一個person
,Vue 還知道可以保留所有現有的元件,並且只需要建立一個新元件並將其插入正確的位置。這是非常有用的,當我們有更復雜的元件,它們有自己的狀態,有初始化邏輯,或者做任何型別的DOM操作時,這對我們很有幫助。
所以接下來看看,如果使用最好的方法來重新渲染元件。
更改 key 以強制重新渲染元件
最後,這是強制Vue重新渲染元件的最佳方法(我認為)。
我們可以採用這種將key
分配給子元件的策略,但是每次想重新渲染元件時,只需更新該key
即可。
這是一個非常基本的方法
<template>
<component-to-re-render :key="componentKey" />
</template>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
每次forceRerender
被呼叫時,我們的componentKey
都會改變。當這種情況發生時,Vue將知道它必須銷燬元件並建立一個新元件。我們得到的是一個子元件,它將重新初始化自身並“重置”其狀態。
如果確實需要重新渲染某些內容,請選擇key
更改方法而不是其他方法。