持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

前言：

掘友们，大家晚上好啊，愉快的假期就要过去了，最后一天，明天就要去公司上班了。俗话说的好，放假不休假，卷王遍天下，今天就给大家简单的提一下，关于vue恢复初始数据的问题。

正文：

我们在vue项目开发过程中，可能会将vue数据恢复到初始状态，恰恰此时此刻，我们的初始数据随着页面的加载，已经被修改了。我们可以通过this指令修改绑定的数据值，但是如果这个过程中，数据过多的情况下，重新赋值会非常麻烦，这个时候我们可以用到this.$options.data();

利用this.$options.data()获取vue的原始数据

this.$options.data();  // 获取到原始数据

this.$data; 获取到的是更改后的数据

this.$data; // 获取的是更改后的数据

通过this. $options.data()获取vue的原始数据，this.$ data获取更改后的数据，再利用Object.assign()进行赋值，就完成了vue实例的初始话。

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

data() {
     return {
         str:'初始数据'
     }
},

通过this.$options.data(). + vue实例属性名，得到初始数据直接赋值就可以只恢复当前项的数据。

 this.str = this.$options.data().str; // 只让str数据恢复

用this.$options.data()重置组件data时，data()里用this获取的props或method都为undefined。

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

data()中若使用了this来访问props或methods，在重置 $data时，注意this.$ options.data()的this指向，最好使用this.$options.data.call(this)。

以上呢是我个人关于vue恢复初始数据的方法和看法，还有更好的办法，只不过目前最简单的就是这种方法。最后希望大家在工作中，如鱼得水，顺顺利利。