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)容的子組件，而不是所有子組件。

補充知識：vue強制刷新組件 ----組件重置到初始狀態(tài)

把一個組件重置到初始狀態(tài)是一個常見的需求，推薦的做法有兩種，一種是父組件重置子組件的 prop，另一種是子組件暴露一個重置的方法供父組件調(diào)用。但有些時候，子組件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態(tài)。

更重要的是，這個子組件我們還動不了。于是我們就需要一種 hack 的方式來強制子組件重置到初始狀態(tài)。

方法如下：

hack 的方式來強制子組件重置到初始狀態(tài)

在你需要重置組件狀態(tài)的操作里面加上這個句話，就可以實現(xiàn)組件的刷新，

v-if 在切換時，元素及它的綁定數(shù)據(jù)和組件都會被銷毀并重建

以上這篇vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。