如何实现Vue中data的初始化数据恢复方法？

本文共计629个文字，预计阅读时间需要3分钟。

在进行Vue开发时，我们经常需要保存一些页面。当前，我们在`app.vue`的配置如下，使用`keep-alive`和`router-view`配合`v-if`来保持页面状态：

vue

在我们进行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。因此，它分配属性，而不仅仅是复制或定义新的属性。