如何实现将Vue组件的data属性恢复到初始化状态的长尾？

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

在Vue开发过程中，我们常需保存某些页面，此时可在app.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 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。