有時(shí)Vue的反應(yīng)性系統(tǒng)還不夠，您只需要重新渲染組件即可夺蛇。
重新渲染組件有以下幾個(gè)辦法：
1.可怕的方法：重新加載整個(gè)頁面
2.可怕的方法：使用v-if
3.更好的方法：使用Vue的內(nèi)置forceUpdate方法
4.最好的方法：在組件上進(jìn)行key更改
重新加載整個(gè)頁面
非常不建議這樣做，我們來看下一個(gè)辦法。
使用v-if
v-if指令鲤孵，該指令僅在組件為true時(shí)才渲染瘩欺。 如果為false蜘腌，則該組件在DOM中不存在沫屡。
下面我們?cè)O(shè)置它以使其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>
這里發(fā)生的事情：
1.最初renderComponent設(shè)置為true，因此my-component組件渲染
2.在forceRerender中我們立即設(shè)置renderComponent為false
3.停止渲染組件my-component金矛，因?yàn)樵?code>v-if指令現(xiàn)在的值為false
4.在nextTick中將renderComponent上設(shè)置回true
5.現(xiàn)在該v-if結(jié)果為true芯急，因此我們my-component再次開始渲染
我們必須等到nextTick，否則我們不會(huì)看到任何變化驶俊。
在Vue中娶耍，一個(gè) nextTick 是一個(gè)DOM更新周期。Vue將收集在同一 nextTick 中進(jìn)行的所有更新饼酿，在 nextTick 結(jié)束時(shí)榕酒，它將根據(jù)這些更新來渲染 DOM 中的內(nèi)容。如果我們不等到nextTick故俐，我們對(duì)renderComponent的更新就會(huì)自動(dòng)取消想鹰，什么也不會(huì)改變。
其次药版，當(dāng)我們第二次渲染時(shí)辑舷，Vue將創(chuàng)建一個(gè)全新的組件。 Vue 將銷毀第一個(gè)槽片，并創(chuàng)建一個(gè)新的何缓，這意味著我們的新my-component將像正常情況一樣經(jīng)歷其所有生命周期-created，mounted等还栓。
不過碌廓，這并不是一個(gè)很好的解決方案，往下看剩盒。
使用forceUpdate
這是解決此問題的兩種最佳方法之一氓皱，此方法得到Vue的官方支持。
forceUpdate在組件實(shí)例本身以及全局實(shí)例上勃刨，可以通過兩種不同的方式調(diào)用：
// 全局
import Vue from 'vue';
Vue.forceUpdate();
// 使用組件實(shí)例
export default {
methods: {
methodThatForcesUpdate() {
// ...
this.$forceUpdate();
// ...
}
}
}
重要提示：這不會(huì)更新您擁有的任何計(jì)算屬性波材。調(diào)用forceUpdate只會(huì)強(qiáng)制重新渲染視圖
最好的方法：修改組件的key達(dá)到組件重新渲染
在許多情況下，我們需要重新渲染組件身隐。
要正確地做到這一點(diǎn)廷区，我們將提供一個(gè)key屬性，以便 Vue 知道特定的組件與特定的數(shù)據(jù)片段相關(guān)聯(lián)贾铝。如果key保持不變隙轻，則不會(huì)更改組件埠帕，但是如果key發(fā)生更改，Vue 就會(huì)知道應(yīng)該刪除舊組件并創(chuàng)建新組件玖绿。
我們可以采用這種將key分配給子組件的策略敛瓷，但是每次想重新渲染組件時(shí)，只需更新該key即可斑匪。
<template>
<component-to-re-render :key="componentKey" />
</template>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
每次 forceRerender被調(diào)用時(shí)呐籽，我們的componentKey都會(huì)改變。當(dāng)這種情況發(fā)生時(shí)蚀瘸，Vue將知道它必須銷毀組件并創(chuàng)建一個(gè)新組件狡蝶。我們得到的是一個(gè)子組件，它將重新初始化自身并“重置”其狀態(tài)贮勃。
