有時(shí)候，依賴 vue 響應(yīng)方式來更新數(shù)據(jù)是不夠的，相反，我們需要手動重新渲染組件來更新數(shù)據(jù)?；蛘撸覀兛赡苤幌霋侀_當(dāng)前的DOM，重新開始。那么，如何讓vue以正確的方式重新呈現(xiàn)組件呢？

強(qiáng)制 Vue 重新渲染組件的最佳方法是在組件上設(shè)置:key。 當(dāng)我們需要重新渲染組件時(shí)，只需更 key 的值，Vue 就會重新渲染組件。

這是一個(gè)非常簡單的解決方案。

當(dāng)然，你可能會對其他方式會更感興趣：

簡單粗暴的方式：重新加載整個(gè)頁面 不妥的方式：使用 v-if 較好的方法：使用Vue的內(nèi)置forceUpdate方法 最好的方法：在組件上進(jìn)行 key 更改 簡單粗暴的方式：重新加載整個(gè)頁面

這相當(dāng)于每次你想關(guān)閉應(yīng)用程序時(shí)都要重新啟動你的電腦。

這種方式或許有用，但這是一個(gè)非常糟糕的解決方案，不要這樣做，我們來看看更好的方法。

不妥的方式：使用 v-if

v-if指令，該指令僅在組件為true時(shí)才渲染。 如果為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時(shí)，我們立即將renderComponent設(shè)置為false 我們停止渲染my-component，因?yàn)関-if指令現(xiàn)在計(jì)算結(jié)果為false 在nextTick方法中將renderComponent設(shè)置回true 當(dāng)v-if指令的計(jì)算結(jié)果為true時(shí)，再次渲染my-component

在這個(gè)過程中，有兩個(gè)部分比較重要

首先，我們必須等到nextTick，否則我們不會看到任何變化。

在Vue中，一個(gè) tick 是一個(gè)DOM更新周期。Vue將收集在同一 tick 中進(jìn)行的所有更新，在 tick 結(jié)束時(shí)，它將根據(jù)這些更新來渲染 DOM 中的內(nèi)容。如果我們不等到next tick，我們對renderComponent的更新就會自動取消，什么也不會改變。

其次，當(dāng)我們第二次渲染時(shí)，Vue將創(chuàng)建一個(gè)全新的組件。 Vue 將銷毀第一個(gè)，并創(chuàng)建一個(gè)新的，這意味著我們的新my-component將像正常情況一樣經(jīng)歷其所有生命周期-created，mounted等。

另外，nextTick 可以與 promise 一起使用:

forceRerender() { // 從 DOM 中刪除 my-component 組件 this.renderComponent = false; this.$nextTick().then(() => { this.renderComponent = true; });}

不過，這并不是一個(gè)很好的解決方案，所以，讓我們做 Vue 想讓我們做的

較好的方法：forceUpdate 方法

這是解決這個(gè)問題的兩種最佳方法之一，這兩種方法都得到了Vue的官方支持。

通常情況下，Vue 會通過更新視圖來響應(yīng)依賴項(xiàng)中的更改。然而，當(dāng)我們調(diào)用forceUpdate時(shí)，也可以強(qiáng)制執(zhí)行更新，即使所有依賴項(xiàng)實(shí)際上都沒有改變。

下面是大多數(shù)人使用這種方法時(shí)所犯的最大錯(cuò)誤。

如果 Vue 在事情發(fā)生變化時(shí)自動更新，為什么我們需要強(qiáng)制更新呢？

原因是有時(shí)候 Vue 的響應(yīng)系統(tǒng)會讓人感到困惑，我們認(rèn)為Vue會對某個(gè)屬性或變量的變化做出響應(yīng)，但實(shí)際上并不是這樣。在某些情況下，Vue的響應(yīng)系統(tǒng)根本檢測不到任何變化。

所以就像上一個(gè)方法，如果你需要這個(gè)來重新渲染你的組件，可能有一個(gè)更好的方法。

有兩種不同的方法可以在組件實(shí)例本身和全局調(diào)用forceUpdate：

// 全局import Vue from ’vue’;Vue.forceUpdate();// 使用組件實(shí)例export default { methods: { methodThatForcesUpdate() { // ... this.$forceUpdate(); // ... } }}

重要提示：這不會更新任何計(jì)算屬性，調(diào)用forceUpdate僅僅強(qiáng)制重新渲染視圖。

最好的方法：在組件上進(jìn)行 key 更改

在許多情況下，我們需要重新渲染組件。

要正確地做到這一點(diǎn)，我們將提供一個(gè)key屬性，以便 Vue 知道特定的組件與特定的數(shù)據(jù)片段相關(guān)聯(lián)。如果key保持不變，則不會更改組件，但是如果key發(fā)生更改，Vue 就會知道應(yīng)該刪除舊組件并創(chuàng)建新組件。

正是我們需要的！

但是首先，我們需要繞一小段路來理解為什么在Vue中使用key。

為什么我們需要在 Vue 中使用 key

一旦你理解了這一點(diǎn)，那么這是了解如何以正確方式強(qiáng)制重新渲染的很小的一步。

假設(shè)我們要渲染具有以下一項(xiàng)或多項(xiàng)內(nèi)容的組件列表：

有本地的狀態(tài) 某種初始化過程，通常在created或mounted鉤子中 通過jQuery或普通api進(jìn)行無響應(yīng)的DOM操作

如果你對該列表進(jìn)行排序或以任何其他方式對其進(jìn)行更新，則需要重新渲染列表的某些部分。 但是，不會希望重新渲染列表中的所有內(nèi)容，而只是重新渲染已更改的內(nèi)容。

為了幫助 Vue 跟蹤已更改和未更改的內(nèi)容，我們提供了一個(gè)key屬性。 在這里使用數(shù)組的索引，因?yàn)樗饕龥]有綁定到列表中的特定對象。

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>// OutputsEvan - 0Sarah - 1James - 2

如果刪除Sarah，得到：

Evan - 0James - 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)建了一個(gè)新組件?，F(xiàn)在，Vue知道它可以為Evan和James保留這兩個(gè)組件，它所要做的就是刪除Sarah的。

如果我們向列表中添加一個(gè)person，Vue 還知道可以保留所有現(xiàn)有的組件，并且只需要?jiǎng)?chuàng)建一個(gè)新組件并將其插入正確的位置。這是非常有用的，當(dāng)我們有更復(fù)雜的組件，它們有自己的狀態(tài)，有初始化邏輯，或者做任何類型的DOM操作時(shí)，這對我們很有幫助。

所以接下來看看，如果使用最好的方法來重新渲染組件。

更改 key 以強(qiáng)制重新渲染組件

最后，這是強(qiáng)制Vue重新渲染組件的最佳方法（我認(rèn)為）。

我們可以采用這種將key分配給子組件的策略，但是每次想重新渲染組件時(shí)，只需更新該key即可。

這是一個(gè)非?；镜姆椒?/p>

<template> <component-to-re-render :key='componentKey' /></template>export default { data() { return { componentKey: 0, }; }, methods: { forceRerender() { this.componentKey += 1; } }}

每次forceRerender被調(diào)用時(shí)，我們的componentKey都會改變。當(dāng)這種情況發(fā)生時(shí)，Vue將知道它必須銷毀組件并創(chuàng)建一個(gè)新組件。我們得到的是一個(gè)子組件，它將重新初始化自身并“重置”其狀態(tài)。

如果確實(shí)需要重新渲染某些內(nèi)容，請選擇key更改方法而不是其他方法。

以上就是Vue中強(qiáng)制組件重新渲染的正確方法的詳細(xì)內(nèi)容，更多關(guān)于vue 強(qiáng)制組件渲染的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！