重新渲染組件的方法總結(jié)

有時(shí)Vue的反應(yīng)性系統(tǒng)還不夠，您只需要重新渲染組件即可。

重新渲染組件有以下幾個(gè)辦法：

• 可怕的方法：重新加載整個(gè)頁(yè)面
• 可怕的方法：使用v-if
• 更好的方法：使用Vue的內(nèi)置forceUpdate方法
• 最好的方法：在組件上進(jìn)行key更改

重新加載整個(gè)頁(yè)面

非常不建議這樣做，我們來(lái)看下一個(gè)辦法

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ā)生的事情：

• 最初renderComponent設(shè)置為true，因此my-component組件渲染
• 在forceRerender中我們立即設(shè)置renderComponent為false
• 停止渲染組件my-component，因?yàn)樵搗-if指令現(xiàn)在的值為false
• 在nextTick中將renderComponent上設(shè)置回true
• 現(xiàn)在該v-if結(jié)果為true，因此我們my-component再次開(kāi)始渲染

我們必須等到nextTick，否則我們不會(huì)看到任何變化。

在Vue中，一個(gè) nextTick 是一個(gè)DOM更新周期。Vue將收集在同一 nextTick 中進(jìn)行的所有更新，在 nextTick 結(jié)束時(shí)，它將根據(jù)這些更新來(lái)渲染 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等。

不過(guò)，這并不是一個(gè)很好的解決方案，往下看

使用forceUpdate

方法解讀：

Vue中，$forceUpdate()的使用

方文檔中指出，$forceUpdate具有強(qiáng)制刷新的作用。那在vue框架中，如果data中有一個(gè)變量:age，修改他，頁(yè)面會(huì)自動(dòng)更新。

但如果data中的變量為數(shù)組或?qū)ο?，我們直接去給某個(gè)對(duì)象或數(shù)組添加屬性，頁(yè)面是識(shí)別不到的<template>

<p>{{userInfo.name}}</p>
? <button @click="updateName">修改userInfo</button>
</template>
<script>
? data(){
? ? return{
? ? ? userInfo:{name:'小明'}
? ? }
? },
? methods:{
? ? updateName(){
? ? ? this.userInfo.name='小紅'
? ? }
? }
</script>

在updateName函數(shù)中，我們嘗試給userInfo對(duì)象修改值，發(fā)現(xiàn)頁(yè)面其實(shí)并沒(méi)有變化

那這時(shí)候有兩種解決方法：

方法一：

methods:{
? updateName(){
? ? this.userInfo.name='小紅'//在此時(shí)，確實(shí)已經(jīng)將userInfo對(duì)象修改完成
? ? console.log(this.userInfo.name);//輸出結(jié)果: 小紅
? ? this.$forceUpdate();//在這里，強(qiáng)制刷新之后，頁(yè)面的結(jié)果變?yōu)?小紅'
? }
}

$forceUpdate() 這個(gè)方法也可以處理 修改for循環(huán) 里面 item的屬性值,沒(méi)有渲染出來(lái)添加這個(gè)方法也生效

方法二：

methods:{
? updateName(){
? ? this.$set('userInfo',name,'小紅');
? }
}

這是解決此問(wèn)題的兩種最佳方法之一，此方法得到Vue的官方支持。

下面是示例：

forceUpdate在組件實(shí)例本身以及全局實(shí)例上，可以通過(guò)兩種不同的方式調(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; ?
? ? ? //this.componentKey += new Date();
? ? }
? }
}

每次 forceRerender被調(diào)用時(shí)，我們的componentKey都會(huì)改變。

當(dāng)這種情況發(fā)生時(shí)，Vue將知道它必須銷毀組件并創(chuàng)建一個(gè)新組件。

我們得到的是一個(gè)子組件，它將重新初始化自身并“重置”其狀態(tài)。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。