Vue中恢复数据为初始状态

Vue中恢复数据为初始状态

在 Vue 项目开发过程中，遇到需要重新使用 data 中的数据，但是data中的数据已经被赋值改变了，如何重置data的值为初始状态呢?

解决办法：

1. 直接赋值（不建议使用，若有多个地方需要重新设置数据，产生大量重复冗余的代码）

this.form = { 需要设置的数据 }
复制代码

2. 使用this.$options.data()获取初始 data 的值，再使用Object.assign()来复制对象;

this.$data：获取当前状态下的 data,也就是要改变的 data 数据; this.$options.data(): vue原始的数据，就是你页面刚加载时的 data

Object.assign(this.$data, this.$options.data())
复制代码

若需要给某一个具体的数据 (eg: form) 重新设置值，则使用如下的方法，eg:

Object.assign(this.$data.form, this.$options.data().form)
复制代码

3. 使用全局变量

注意！

data()中若使用了 this 来访问 props 或 methods，用 this.$options.data() 重置组件data时，data()里用 this 获取的 props 或 method 都为 undefined，注意 this.$options.data() 的 this 指向，最好使用 this.$options.data.call(this)。