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