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