1. 將data恢復到初始狀態

Object.assign(this.$data,this.$options.data()) // 初始化data

這裡的 this.$options.data() 作為源物件， this.$data 作為目標物件。源物件覆蓋併合並目標物件中的內容，即有則覆蓋，無則新增。

2. 重新渲染元件

方法一：v-if（可以重置生命週期）

雖然能實現重新渲染，但不推薦首選

方法二：給元件加key值【推薦】

通過修改key的值，就會重新渲染該元件

方法三：this.$forceUpdate()

迫使 Vue 例項重新渲染。注意它僅僅影響例項本身和插入插槽內容的子元件，而不是所有子元件。

補充知識：vue強制重新整理元件 ----元件重置到初始狀態

把一個元件重置到初始狀態是一個常見的需求，推薦的做法有兩種，一種是父元件重置子元件的 prop，另一種是子元件暴露一個重置的方法供父元件呼叫。但有些時候，子元件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態。

更重要的是，這個子元件我們還動不了。於是我們就需要一種 hack 的方式來強制子元件重置到初始狀態。

方法如下：

hack 的方式來強制子元件重置到初始狀態

在你需要重置元件狀態的操作裡面加上這個句話，就可以實現元件的重新整理，

v-if 在切換時，元素及它的繫結資料和元件都會被銷燬並重建

以上這篇vue將data恢復到初始狀態 && 重新渲染元件例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。