vue將data恢復到初始狀態(tài) && 重新渲染組件實例
1. 將data恢復到初始狀態(tài)
Object.assign(this.$data, this.$options.data()) // 初始化data
這里的 this.$options.data() 作為源對象， this.$data 作為目標對象。源對象覆蓋并合并目標對象中的內(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恢復到初始狀態(tài) && 重新渲染組件實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文詳細介紹了如何在Vue3項目中集成Electron,包括安裝electron和electron-builder兩個依賴,以及配置.npmrc文件和手動修改鏡像源的方法,整個過程詳細記錄了從創(chuàng)建項目、安裝依賴、修改配置、到最終打包部署的每一步2024-10-10
Vue2.0實現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例
這篇文章主要介紹了Vue2.0實現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結(jié)合實例形式分析了vue2.0組件之間通信的原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue 父組件給子組件傳值，子組件給父組件傳值,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
這篇文章主要介紹了vue如何實現(xiàn)簡易的彈出框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue-router進行build無法正常顯示路由頁面的問題
下面小編就為大家分享一篇解決vue-router進行build無法正常顯示路由頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
要實現(xiàn)不同角色登錄跳轉(zhuǎn)不同的前端頁面,可以在登錄成功后,根據(jù)用戶的角色信息,使用路由跳轉(zhuǎn)到不同的頁面,這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)不同角色登入展示不同頁面效果的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章中,我將逐步介紹如何使用 Vue 和 ECharts 實現(xiàn)一個互動式的地圖展示組件,其中支持返回上一層地圖、點擊查看不同城市的詳細信息,以及根據(jù)數(shù)據(jù)動態(tài)展示不同的統(tǒng)計信息,感興趣的小伙伴跟著小編一起來看看吧2025-02-02
這篇文章主要為大家詳細介紹了vue使用rules實現(xiàn)表單字段驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
當我們把信息化系統(tǒng)給用戶使用時，用戶經(jīng)常需要把以前在excel里錄入的數(shù)據(jù)導入的信息化系統(tǒng)里，這樣為用戶提供了很大的方便，這篇文章主要介紹了vue中或者react中的excel導入和導出,需要的朋友可以參考下2023-09-09