vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法
在我們進(jìn)行vue開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)保存一些頁(yè)面，此時(shí)，我們?cè)赼pp.vue的配置如下，
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive>
以此來(lái)保存頁(yè)面，那么在再次進(jìn)入這些頁(yè)面的時(shí)候，我們需要重置該頁(yè)面的原始數(shù)據(jù)，那么該如何進(jìn)行呢？是不是要講每個(gè)數(shù)據(jù)進(jìn)行重寫(xiě)，答案是否定的。利用Object.assign 以及vue的數(shù)據(jù)可以快速重置。
Object.assign(this.$data, this.$options.data())
Object.assign() ----詳解
Object.assign(target, ...sources)
參數(shù)： target 目標(biāo)對(duì)象。sources 源對(duì)象。
返回值：目標(biāo)對(duì)象。
描述
如果目標(biāo)對(duì)象中的屬性具有相同的鍵，則屬性將被源對(duì)象中的屬性覆蓋。后面的源對(duì)象的屬性將類(lèi)似地覆蓋前面的源對(duì)象的屬性。
Object.assign 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象。該方法使用源對(duì)象的[[Get]]和目標(biāo)對(duì)象的[[Set]]，所以它會(huì)調(diào)用相關(guān) getter 和 setter。因此，它分配屬性，而不僅僅是復(fù)制或定義新的屬性。如果合并源包含getter，這可能使其不適合將新屬性合并到原型中。為了將屬性定義（包括其可枚舉性）復(fù)制到原型，應(yīng)使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
String類(lèi)型和 Symbol 類(lèi)型的屬性都會(huì)被拷貝。
在出現(xiàn)錯(cuò)誤的情況下，例如，如果屬性不可寫(xiě)，會(huì)引發(fā)TypeError，如果在引發(fā)錯(cuò)誤之前添加了任何屬性，則可以更改target對(duì)象。
注意，Object.assign 不會(huì)跳過(guò)那些值為 null 或 undefined 的源對(duì)象。
注意：針對(duì)深拷貝，需要使用其他辦法，因?yàn)?Object.assign()拷貝的是屬性值。假如源對(duì)象的屬性值是一個(gè)對(duì)象的引用，那么它也只指向那個(gè)引用。
以上這篇vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+elementplus前端生成圖片驗(yàn)證碼完整代碼舉例
在開(kāi)發(fā)過(guò)程中有時(shí)候需要使用圖片驗(yàn)證碼進(jìn)行增加安全強(qiáng)度,在點(diǎn)擊圖片時(shí)更新新的圖片驗(yàn)證碼,記錄此功能,以便后期使用,這篇文章主要給大家介紹了關(guān)于vue3+elementplus前端生成圖片驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-03-03
vue如何通過(guò)router-link或者button跳轉(zhuǎn)到一個(gè)新的頁(yè)面
這篇文章主要介紹了vue如何通過(guò)router-link或者button跳轉(zhuǎn)到一個(gè)新的頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue3通過(guò)canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過(guò)canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來(lái)跟隨小編一起學(xué)習(xí)一下吧2023-12-12
解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個(gè)報(bào)錯(cuò)是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue實(shí)現(xiàn)多頁(yè)簽組件的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue開(kāi)發(fā)手冊(cè)Function-based?API?RFC
這篇文章主要為大家介紹了Vue開(kāi)發(fā)手冊(cè)Function-based?API?RFC使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue cli使用絕對(duì)路徑引用圖片問(wèn)題的解決
這篇文章主要給大家介紹了關(guān)于vue cli使用絕對(duì)路徑引用圖片問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2017-12-12
詳解Vue.js iview實(shí)現(xiàn)樹(shù)形權(quán)限表（可擴(kuò)展表）
這篇文章主要介紹了詳解Vue.js iview實(shí)現(xiàn)樹(shù)形權(quán)限表（可擴(kuò)展表），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue+Router+Element實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Vue+Router+Element實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09