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