背景

我们在写vue2项目时，经常会遇到需要重置数据的场景，例如有这样一个组件：

data() {
	return {
  	title: '',
    subTitle: '',
    author: '',
    content: ''
  }
},
methods: {
  // 调提交数据接口
	submit() {
  	http.post('xxxx', {
    	// 要提交的一些数据。。。
      title: this.title,
      subTitle: this.subTitle,
      author: this.author,
      content: this.content
    }).then(res => {
    	// 提交成功
      // 清空数据
      this.title = ''
      this.subTitle = ''
      this.author = ''
      this.content = ''
    })
  }
}

以上代码不仅看着不够优雅，写起来也是相当麻烦，字段少还可以这么写，那要是几十个甚至更多的字段呢？

有人说可以用一个对象把需要重置的字段包起来，像下面这样：

data() {
	return {
  	formData: {
    	title: '',
      subTitle: '',
      author: '',
      content: ''
    }
  }
},
methods: {
  // 调提交数据接口
	submit() {
  	http.post('xxxx', {
    	// 要提交的一些数据。。。
      ...this.formData
    }).then(res => {
    	// 提交成功
      // 清空数据
      this.formData = {
      	title: '',
        subTitle: '',
        author: '',
        content: ''
      }
    })
  }
}

看上去好像是优雅一点了，少了几行代码，但也是换汤不换药。那么有没有一种方法可以一行代码重置呢？

答案是：当然有。

我们都知道尤大发布了vue3，与vue2最大的不同就是，vue2被称为选项式（Option）api，vue3被称为组合式（Composition）api。

在vue2中，我们可以通过this关键字来访问当前vue实例的属性和方法，其中有一个特殊的属性，$options

$options的值是个对象{}，打印它可以看到内部有一个data(){}函数，也就是我们在组件中声明的data函数，这个函数返回了一些我们自己定义的字段。

那么我们就可以再次调用data这个函数，不就可以拿到初始值了吗？

搜索引擎搜索：“vue2重置数据”。基本上可以得到两种答案：

// 第一种
this.formData = this.$options.data().formData
// 第二种
Object.assign(this.formData, this.$options.data().formData)
// 当然也可以使用
Object.assign(this.$data, this.$options.data())

解释

以上代码解释

vue中：

this.$data 获取当前状态下的data

this.$options.data() 获取该组件初始状态下的data

区别

那么以上两种方法有什么区别呢？

乍一看没区别，运行起来也没区别，实际上在某种场景下是有区别的。

查看MDN，Object.assign(target, ...sources) 方法可以合并两个对象，会改变target本身，如果两个对象中有相同的属性，后面的会覆盖前面的。而且如果后面的对象里新增了一些属性，也会被合并到目标对象。但是第一种方法就不会，而是会完全重置到data最初始的状态，这就是二者的区别。具体使用哪一种还是要看具体场景。