vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實(shí)例
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（可以重置生命周期）
雖然能實(shí)現(xiàn)重新渲染，但不推薦首選
方法二：給組件加key值【推薦】
通過修改key的值，就會(huì)重新渲染該組件
方法三：this.$forceUpdate()
迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
補(bǔ)充知識(shí)：vue強(qiáng)制刷新組件 ----組件重置到初始狀態(tài)
把一個(gè)組件重置到初始狀態(tài)是一個(gè)常見的需求，推薦的做法有兩種，一種是父組件重置子組件的 prop，另一種是子組件暴露一個(gè)重置的方法供父組件調(diào)用。但有些時(shí)候，子組件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態(tài)。
更重要的是，這個(gè)子組件我們還動(dòng)不了。于是我們就需要一種 hack 的方式來強(qiáng)制子組件重置到初始狀態(tài)。
方法如下：
hack 的方式來強(qiáng)制子組件重置到初始狀態(tài)
在你需要重置組件狀態(tài)的操作里面加上這個(gè)句話，就可以實(shí)現(xiàn)組件的刷新，
v-if 在切換時(shí)，元素及它的綁定數(shù)據(jù)和組件都會(huì)被銷毀并重建
以上這篇vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文詳細(xì)介紹了如何在Vue3項(xiàng)目中集成Electron,包括安裝electron和electron-builder兩個(gè)依賴,以及配置.npmrc文件和手動(dòng)修改鏡像源的方法,整個(gè)過程詳細(xì)記錄了從創(chuàng)建項(xiàng)目、安裝依賴、修改配置、到最終打包部署的每一步2024-10-10
Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結(jié)合實(shí)例形式分析了vue2.0組件之間通信的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
vue 父組件給子組件傳值子組件給父組件傳值的實(shí)例代碼
這篇文章主要介紹了vue 父組件給子組件傳值，子組件給父組件傳值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡易的彈出框，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue-router進(jìn)行build無法正常顯示路由頁面的問題
下面小編就為大家分享一篇解決vue-router進(jìn)行build無法正常顯示路由頁面的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
前端實(shí)現(xiàn)不同角色登入展示不同頁面效果實(shí)例
要實(shí)現(xiàn)不同角色登錄跳轉(zhuǎn)不同的前端頁面,可以在登錄成功后,根據(jù)用戶的角色信息,使用路由跳轉(zhuǎn)到不同的頁面,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)不同角色登入展示不同頁面效果的相關(guān)資料,需要的朋友可以參考下2024-08-08
基于Vue+ECharts實(shí)現(xiàn)地圖展示與交互
這篇文章中,我將逐步介紹如何使用 Vue 和 ECharts 實(shí)現(xiàn)一個(gè)互動(dòng)式的地圖展示組件,其中支持返回上一層地圖、點(diǎn)擊查看不同城市的詳細(xì)信息,以及根據(jù)數(shù)據(jù)動(dòng)態(tài)展示不同的統(tǒng)計(jì)信息,感興趣的小伙伴跟著小編一起來看看吧2025-02-02
vue使用rules實(shí)現(xiàn)表單字段驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue使用rules實(shí)現(xiàn)表單字段驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue react中的excel導(dǎo)入和導(dǎo)出功能
當(dāng)我們把信息化系統(tǒng)給用戶使用時(shí)，用戶經(jīng)常需要把以前在excel里錄入的數(shù)據(jù)導(dǎo)入的信息化系統(tǒng)里，這樣為用戶提供了很大的方便，這篇文章主要介紹了vue中或者react中的excel導(dǎo)入和導(dǎo)出,需要的朋友可以參考下2023-09-09