有時候，依賴 vue 響應方式來更新資料是不夠的，相反，我們需要手動重新渲染元件來更新資料。或者，我們可能只想拋開當前的dom，重新開始。那麼，如何讓vue以正確的方式重新呈現元件呢？
強制 vue 重新渲染元件的最佳方法是在元件上設定:key。 當我們需要重新渲染元件時，只需更 key 的值，vue 就會重新渲染元件。
這是乙個非常簡單的解決方案。
不妥的方式：使用 v-if
較好的方法：使用vue的內建forceupdate方法
最好的方法：在元件上進行 key 更改
這相當於每次你想關閉應用程式時都要重新啟動你的電腦。
這種方式或許有用，但這是乙個非常糟糕的解決方案，不要這樣做，我們來看看更好的方法。
v-if指令，該指令僅在元件為true時才渲染。 如果為false，則該元件在dom中不存在。
來看看，v-if 是怎麼工作的，在template中，新增v-if指令：
剛開始 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() );
}
這是解決這個問題的兩種最佳方法之一，這兩種方法都得到了vue的官方支援。
通常情況下，vue 會通過更新檢視來響應依賴項中的更改。然而，當我們呼叫forceupdate時，也可以強制執行更新，即使所有依賴項實際上都沒有改變。
下面是大多數人使用這種方法時所犯的最大錯誤。
如果 vue 在事情發生變化時自動更新，為什麼我們需要強制更新呢？
原因是有時候 vue 的響應系統會讓人感到困惑，我們認為vue會對某個屬性或變數的變化做出響應，但實際上並不是這樣。在某些情況下，vue的響應系統根本檢測不到任何變化。
所以就像上乙個方法，如果你需要這個來重新渲染你的元件，可能有乙個更好的方法。
有兩種不同的方法可以在元件例項本身和全域性呼叫forceupdate：
// 全域性
import vue from 'vue';
vue.forceupdate();
// 使用元件例項
export default
}}
要正確地做到這一點，我們將提供乙個key屬性，以便 vue 知道特定的元件與特定的資料片段相關聯。如果key保持不變，則不會更改元件，但是如果key發生更改，vue 就會知道應該刪除舊元件並建立新元件。
正是我們需要的！
但是首先，我們需要繞一小段路來理解為什麼在vue中使用key。
一旦你理解了這一點，那麼這是了解如何以正確方式強制重新渲染的很小的一步。
如果你對該列表進行排序或以任何其他方式對其進行更新，則需要重新渲染列表的某些部分。 但是，不會希望重新渲染列表中的所有內容，而只是重新渲染已更改的內容。
為了幫助 vue 跟蹤已更改和未更改的內容，我們提供了乙個key屬性。 在這裡使用陣列的索引，因為索引沒有繫結到列表中的特定物件。
const people = [
, ,
,];
// outputs
evan - 0
sarah - 1
james - 2
evan - 0
james - 1
所以這裡，我們可以使用唯一的 id 來作為 key
const people = [
, ,
,];
如果我們向列表中新增乙個person，vue 還知道可以保留所有現有的元件，並且只需要建立乙個新元件並將其插入正確的位置。這是非常有用的，當我們有更複雜的元件，它們有自己的狀態，有初始化邏輯，或者做任何型別的dom操作時，這對我們很有幫助。
所以接下來看看，如果使用最好的方法來重新渲染元件。
vi設計 辦公資源**大全
最後，這是強制vue重新渲染元件的最佳方法（我認為）。
我們可以採用這種將key分配給子元件的策略，但是每次想重新渲染元件時，只需更新該key即可。
這是乙個非常基本的方法
export default ;
},methods:
}}
如果確實需要重新渲染某些內容，請選擇key更改方法而不是其他方法。
vue強制重新整理元件 強制Vue重新渲染元件的方法
強制vue重新渲染元件的方法 閱讀 217 有時候，依賴 vue 響應方式來更新資料是不夠的，相反，我們需要手動重新渲染元件來更新資料。或者，我們可能只想拋開當前的dom，重新開始。那麼，如何讓vue以正確的方式重新呈現元件呢？強制 vue 重新渲染元件的最佳方法是在元件上設定 key。當我們需要重...
vue 強制重新整理元件重新渲染
實現功能 問題描述 父元件給子元件傳遞資料，子元件第一次呼叫資料的時候頁面渲染是正常的，當資料變化的時候，子元件的頁面渲染就失效了。問題判斷 通過一次次測試發現，第一次開啟子元件的時候頁面的渲染是正常的，後面開啟之後渲染就失效了。所以初步懷疑是第二次呼叫元件的時候沒有對資料進行渲染。解決方案一 當資...
vue強制重新整理元件 如何強制vue元件重新渲染
不完全翻譯系列 有些時候vue的響應機制並不起作用 注 vue官網文件 注意事項 這個時候我們需要強制vue元件重新渲染，也或許你可以刪掉當前的元件重新建立乙個新元件。所以，如何才能正確地讓元件重新渲染？最好的方法是給元件設定 key 當你需要元件重新渲染時，只需要更改key的值。除了用key外，用...