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)文章
這篇文章主要介紹了Vue封裝數(shù)字框組件實現(xiàn)流程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
Vue3 Element-plus el-menu無限級菜單組件封裝過程
對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級菜單組件封裝,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
今天小編就為大家分享一篇axios 封裝上傳文件的請求方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
雙端Diff在可以解決更多簡單Diff算法處理不了的場景，且比簡單Diff算法性能更好。本文將通過示例為大家詳細講講雙端diff算法的實現(xiàn)與使用，需要的可以參考一下2022-09-09
vue axios數(shù)據(jù)請求及vue中使用axios的方法
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，在vue中數(shù)據(jù)請求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請求及vue中使用axios的方法,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了用Vue?Demi同時支持Vue2和Vue3的方法,實際開發(fā)中，同一個API在不同的版本中可能導(dǎo)入的來源不一樣，比如ref方法，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue貨幣過濾器的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本文主要介紹了vue單頁面SEO優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要為大家詳細介紹了Vue-cli框架實現(xiàn)計時器應(yīng)用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08