vue data恢复初始化数据的实现方法

在我们进行vue开发过程中，经常会保存一些页面，此时，我们在app.vue的配置如下，

 <keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>

以此来保存页面，那么在再次进入这些页面的时候，我们需要重置该页面的原始数据，那么该如何进行呢？是不是要讲每个数据进行重写，答案是否定的。利用Object.assign 以及vue的数据可以快速重置。

Object.assign(this.$data, this.$options.data())

Object.assign() ----详解

Object.assign(target, ...sources)

参数： target 目标对象。sources 源对象。

返回值：目标对象。

描述

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用和。

类型和 类型的属性都会被拷贝。

在出现错误的情况下，例如，如果属性不可写，会引发，如果在引发错误之前添加了任何属性，则可以更改target对象。

注意，Object.assign 不会跳过那些值为 或 的源对象。

注意：针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。

以上这篇vue data恢复初始化数据的实现方法就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。