怎么在Vue中強制組件重新渲染
怎么在Vue中強制組件重新渲染？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
創(chuàng)新互聯(lián)專注骨干網(wǎng)絡(luò)服務(wù)器租用10余年，服務(wù)更有保障！服務(wù)器租用，服務(wù)器托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。
簡單粗暴的方式：重新加載整個頁面
這相當(dāng)于每次你想關(guān)閉應(yīng)用程序時都要重新啟動你的電腦。
這種方式或許有用，但這是一個非常糟糕的解決方案，不要這樣做，我們來看看更好的方法。
不妥的方式：使用 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設(shè)置為true，因此渲染 my-component 組件
當(dāng)我們調(diào)用forceRerender時，我們立即將renderComponent設(shè)置為false
我們停止渲染my-component，因為v-if指令現(xiàn)在計算結(jié)果為false
在nextTick方法中將renderComponent設(shè)置回true
當(dāng)v-if指令的計算結(jié)果為true時，再次渲染my-component
在這個過程中，有兩個部分比較重要
首先，我們必須等到nextTick，否則我們不會看到任何變化。
在Vue中，一個 tick 是一個DOM更新周期。Vue將收集在同一 tick 中進行的所有更新，在 tick 結(jié)束時，它將根據(jù)這些更新來渲染 DOM 中的內(nèi)容。如果我們不等到next tick，我們對renderComponent的更新就會自動取消，什么也不會改變。
其次，當(dāng)我們第二次渲染時，Vue將創(chuàng)建一個全新的組件。 Vue 將銷毀第一個，并創(chuàng)建一個新的，這意味著我們的新my-component將像正常情況一樣經(jīng)歷其所有生命周期-created，mounted等。
另外，nextTick 可以與 promise 一起使用:
forceRerender() {
// 從 DOM 中刪除 my-component 組件
this.renderComponent = false;
this.$nextTick().then(() => {
this.renderComponent = true;
});
}不過，這并不是一個很好的解決方案，所以，讓我們做 Vue 想讓我們做的
較好的方法：forceUpdate 方法
這是解決這個問題的兩種最佳方法之一，這兩種方法都得到了Vue的官方支持。
通常情況下，Vue 會通過更新視圖來響應(yīng)依賴項中的更改。然而，當(dāng)我們調(diào)用forceUpdate時，也可以強制執(zhí)行更新，即使所有依賴項實際上都沒有改變。
下面是大多數(shù)人使用這種方法時所犯的最大錯誤。
如果 Vue 在事情發(fā)生變化時自動更新，為什么我們需要強制更新呢？
原因是有時候 Vue 的響應(yīng)系統(tǒng)會讓人感到困惑，我們認(rèn)為Vue會對某個屬性或變量的變化做出響應(yīng)，但實際上并不是這樣。在某些情況下，Vue的響應(yīng)系統(tǒng)根本檢測不到任何變化。
所以就像上一個方法，如果你需要這個來重新渲染你的組件，可能有一個更好的方法。
有兩種不同的方法可以在組件實例本身和全局調(diào)用forceUpdate：
// 全局
import Vue from 'vue';
Vue.forceUpdate();
// 使用組件實例
export default {
methods: {
methodThatForcesUpdate() {
// ...
this.$forceUpdate();
// ...
}
}
}重要提示：這不會更新任何計算屬性，調(diào)用forceUpdate僅僅強制重新渲染視圖。
最好的方法：在組件上進行 key 更改
在許多情況下，我們需要重新渲染組件。
要正確地做到這一點，我們將提供一個key屬性，以便 Vue 知道特定的組件與特定的數(shù)據(jù)片段相關(guān)聯(lián)。如果key保持不變，則不會更改組件，但是如果key發(fā)生更改，Vue 就會知道應(yīng)該刪除舊組件并創(chuàng)建新組件。
正是我們需要的！
但是首先，我們需要繞一小段路來理解為什么在Vue中使用key。
為什么我們需要在 Vue 中使用 key
一旦你理解了這一點，那么這是了解如何以正確方式強制重新渲染的很小的一步。
假設(shè)我們要渲染具有以下一項或多項內(nèi)容的組件列表：
有本地的狀態(tài)
某種初始化過程，通常在created或mounted鉤子中
通過jQuery或普通api進行無響應(yīng)的DOM操作
如果你對該列表進行排序或以任何其他方式對其進行更新，則需要重新渲染列表的某些部分。 但是，不會希望重新渲染列表中的所有內(nèi)容，而只是重新渲染已更改的內(nèi)容。
為了幫助 Vue 跟蹤已更改和未更改的內(nèi)容，我們提供了一個key屬性。 在這里使用數(shù)組的索引，因為索引沒有綁定到列表中的特定對象。
const people = [
{ name: 'Evan', age: 34 },
{ name: 'Sarah', age: 98 },
{ name: 'James', age: 45 },
];如果我們使用索引將其渲染出來，則會得到以下結(jié)果：
<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關(guān)聯(lián)的索引被更改，即使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創(chuàng)建了一個新組件。現(xiàn)在，Vue知道它可以為Evan和James保留這兩個組件，它所要做的就是刪除Sarah的。
如果我們向列表中添加一個person，Vue 還知道可以保留所有現(xiàn)有的組件，并且只需要創(chuàng)建一個新組件并將其插入正確的位置。這是非常有用的，當(dāng)我們有更復(fù)雜的組件，它們有自己的狀態(tài)，有初始化邏輯，或者做任何類型的DOM操作時，這對我們很有幫助。
所以接下來看看，如果使用最好的方法來重新渲染組件。
更改 key 以強制重新渲染組件
最后，這是強制Vue重新渲染組件的最佳方法（我認(rèn)為）。
我們可以采用這種將key分配給子組件的策略，但是每次想重新渲染組件時，只需更新該key即可。
這是一個非?；镜姆椒?/p>
<template>
<component-to-re-render :key="componentKey" />
</template>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}Vue的優(yōu)點
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。
看完上述內(nèi)容，你們掌握怎么在Vue中強制組件重新渲染的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
當(dāng)前文章：怎么在Vue中強制組件重新渲染
分享網(wǎng)址：http://chinadenli.net/article26/gpcojg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、做網(wǎng)站、定制開發(fā)、虛擬主機、微信公眾號、響應(yīng)式網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
