vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實例
1. 將data恢復(fù)到初始狀態(tài)
Object.assign(this.$data, this.$options.data()) // 初始化data
這里的 this.$options.data() 作為源對象， this.$data 作為目標(biāo)對象。源對象覆蓋并合并目標(biāo)對象中的內(nèi)容，即有則覆蓋，無則添加。
2. 重新渲染組件
方法一：v-if（可以重置生命周期）
雖然能實現(xiàn)重新渲染，但不推薦首選
方法二：給組件加key值【推薦】
通過修改key的值，就會重新渲染該組件
方法三：this.$forceUpdate()
迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
補(bǔ)充知識：vue強(qiáng)制刷新組件 ----組件重置到初始狀態(tài)
把一個組件重置到初始狀態(tài)是一個常見的需求，推薦的做法有兩種，一種是父組件重置子組件的 prop，另一種是子組件暴露一個重置的方法供父組件調(diào)用。但有些時候，子組件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態(tài)。
更重要的是，這個子組件我們還動不了。于是我們就需要一種 hack 的方式來強(qiáng)制子組件重置到初始狀態(tài)。
方法如下：
hack 的方式來強(qiáng)制子組件重置到初始狀態(tài)
在你需要重置組件狀態(tài)的操作里面加上這個句話，就可以實現(xiàn)組件的刷新，
v-if 在切換時，元素及它的綁定數(shù)據(jù)和組件都會被銷毀并重建
以上這篇vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.extend構(gòu)造器的詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
下面小編就為大家分享一篇解決vue build打包之后首頁白屏的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于Vue項目引發(fā)的「過濾器」使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
下面小編就為大家分享一篇基于vue中css預(yù)加載使用sass的配置方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue3中proxy的基本用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)前端分頁完整代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue build錯誤異常的解決方法 ，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
vue中監(jiān)聽input框獲取焦點及失去焦點的問題
這篇文章主要介紹了vue中監(jiān)聽input框獲取焦點，失去焦點的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
dhtmlxGantt是一個強(qiáng)大的JavaScript Gantt圖表庫,提供易于使用、高度可自定義的Gantt圖表組件,它支持多項任務(wù)和進(jìn)度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時間線和計劃表,本文給大家介紹前端vue實現(xiàn)甘特圖的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了解決vue中監(jiān)聽返回鍵問題,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08