vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法
在我們進(jìn)行vue開發(fā)過程中，經(jīng)常會(huì)保存一些頁面，此時(shí)，我們在app.vue的配置如下，
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive>
以此來保存頁面，那么在再次進(jìn)入這些頁面的時(shí)候，我們需要重置該頁面的原始數(shù)據(jù)，那么該如何進(jìn)行呢？是不是要講每個(gè)數(shù)據(jù)進(jìn)行重寫，答案是否定的。利用Object.assign 以及vue的數(shù)據(jù)可以快速重置。
Object.assign(this.$data, this.$options.data())
Object.assign() ----詳解
Object.assign(target, ...sources)
參數(shù)： target 目標(biāo)對象。sources 源對象。
返回值：目標(biāo)對象。
描述
如果目標(biāo)對象中的屬性具有相同的鍵，則屬性將被源對象中的屬性覆蓋。后面的源對象的屬性將類似地覆蓋前面的源對象的屬性。
Object.assign 方法只會(huì)拷貝源對象自身的并且可枚舉的屬性到目標(biāo)對象。該方法使用源對象的[[Get]]和目標(biāo)對象的[[Set]]，所以它會(huì)調(diào)用相關(guān) getter 和 setter。因此，它分配屬性，而不僅僅是復(fù)制或定義新的屬性。如果合并源包含getter，這可能使其不適合將新屬性合并到原型中。為了將屬性定義（包括其可枚舉性）復(fù)制到原型，應(yīng)使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
String類型和 Symbol 類型的屬性都會(huì)被拷貝。
在出現(xiàn)錯(cuò)誤的情況下，例如，如果屬性不可寫，會(huì)引發(fā)TypeError，如果在引發(fā)錯(cuò)誤之前添加了任何屬性，則可以更改target對象。
注意，Object.assign 不會(huì)跳過那些值為 null 或 undefined 的源對象。
注意：針對深拷貝，需要使用其他辦法，因?yàn)?Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個(gè)對象的引用，那么它也只指向那個(gè)引用。
以上這篇vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue封裝數(shù)字框組件實(shí)現(xiàn)流程詳解
這篇文章主要介紹了Vue封裝數(shù)字框組件實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
Vue3 Element-plus el-menu無限級(jí)菜單組件封裝過程
對于element中提供給我們的el-menu組件最多可以實(shí)現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進(jìn)行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級(jí)菜單組件封裝,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
今天小編就為大家分享一篇axios 封裝上傳文件的請求方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
雙端Diff在可以解決更多簡單Diff算法處理不了的場景，且比簡單Diff算法性能更好。本文將通過示例為大家詳細(xì)講講雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下2022-09-09
vue axios數(shù)據(jù)請求及vue中使用axios的方法
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，在vue中數(shù)據(jù)請求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請求及vue中使用axios的方法,需要的朋友可以參考下2018-09-09
用Vue?Demi同時(shí)支持Vue2和Vue3的方法
這篇文章主要介紹了用Vue?Demi同時(shí)支持Vue2和Vue3的方法,實(shí)際開發(fā)中，同一個(gè)API在不同的版本中可能導(dǎo)入的來源不一樣，比如ref方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue貨幣過濾器的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue單頁面SEO優(yōu)化的實(shí)現(xiàn)
本文主要介紹了vue單頁面SEO優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08