強制vue重新渲染元件的方法
閱讀：217
有時候，依賴 vue 響應方式來更新資料是不夠的，相反，我們需要手動重新渲染元件來更新資料。或者，我們可能只想拋開當前的dom，重新開始。那麼，如何讓vue以正確的方式重新呈現元件呢？
強制 vue 重新渲染元件的最佳方法是在元件上設定:key。 當我們需要重新渲染元件時，只需更 key 的值，vue 就會重新渲染元件。
這是乙個非常簡單的解決方案。
不妥的方式：使用 v-if
較好的方法：使用vue的內建forceupdate方法
最好的方法：在元件上進行 key 更改
這相當於每次你想關閉應用程式時都要重新啟動你的電腦。
這種方式或許有用，但這是乙個非常糟糕的解決方案，不要這樣做，我們來看看更好的方法。
不妥的方式：使用v-if
v-if指令，該指令僅在元件為true時才渲染。 如果為false，則該元件在dom中不存在。
來看看，v-if 是怎麼工作的，在template中，新增v-if指令：
在script 中，使用nexttick的方法
export default ,,,
如果我們使用索引將其渲染出來，則會得到以下結果：
// outputs
evan - 0
sarah - 1
james - 2
如果刪除sarah，得到：evan - 0
james - 1
與james關聯的索引被更改，即使james仍然是james。 james會被重新渲染，這並不是我們希望的。
所以這裡，我們可以使用唯一的 id 來作為 keyconst people = [,,
,在我們從列表中刪除sarah之前，vue刪除了sarah和james的元件，然後為james建立了乙個新元件。現在，vue知道它可以為evan和james保留這兩個元件，它所要做的就是刪除sarah的。
如果我們向列表中新增乙個person，vue 還知道可以保留所有現有的元件，並且只需要建立乙個新元件並將其插入正確的位置。這是非常有用的，當我們有更複雜的元件，它們有自己的狀態，有初始化邏輯，或者做任何型別的dom操作時，這對我們很有幫助。
所以接下來看看，如果使用最好的方法來重新渲染元件。
更改 key 以強制重新渲染元件
最後，這是強制vue重新渲染元件的最佳方法(我認為)。
我們可以採用這種將key分配給子元件的策略，但是每次想重新渲染元件時，只需更新該key即可。
這是乙個非常基本的方法
export default {
data() {
return {
componentkey: 0,
methods: {
forcererender() {
this.componentkey += 1;
每次forcererender被呼叫時，我們的componentkey都會改變。當這種情況發生時，vue將知道它必須銷毀元件並建立乙個新元件。我們得到的是乙個子元件，它將重新初始化自身並「重置」其狀態。
如果確實需要重新渲染某些內容，請選擇key更改方法而不是其他方法。
擴充套件知識：
vue.js是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，vue 採用自底向上增量開發的設計。vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，vue 完全有能力驅動採用單檔案元件和vue生態系統支援的庫開發的複雜單頁應用。
vue.js 的目標是通過盡可能簡單的 api 實現響應的資料繫結和組合的檢視元件 。
vue.js 自身不是乙個全能框架--它只聚焦於檢視層。因此它非常容易學習，非常容易與其它庫或已有專案整合。另一方面，在與相關工具和支援庫一起使用時 ，vue.js 也能完美地驅動複雜的單頁應用。
vue強制重新整理元件
把乙個元件重置到初始狀態是乙個常見的需求，推薦的做法有兩種，一種是父元件重置子元件的 prop，另一種是子元件暴露乙個重置的方法供父元件呼叫。但有些時候，子元件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態。更重要的是，這個子元件我們還動不了。於是我們就需要一種 hack 的方式來強制子...
vue 強制重新整理元件
使用vue進行開發時，如果要重新整理當前路由，則呼叫router.go 0 方法即可。但是某些情況下，我們可能要求僅僅重新整理某個元件，而不是路由，那麼我們應該怎麼做呢？如果要在元件內部中進行強制重新整理，則可以呼叫this.forceupdate 強制重新渲染元件，從而達到更新目的。重新整理當前元...
vue強制重新整理元件 如何強制vue元件重新渲染
不完全翻譯系列 有些時候vue的響應機制並不起作用 注 vue官網文件 注意事項 這個時候我們需要強制vue元件重新渲染，也或許你可以刪掉當前的元件重新建立乙個新元件。所以，如何才能正確地讓元件重新渲染？最好的方法是給元件設定 key 當你需要元件重新渲染時，只需要更改key的值。除了用key外，用...