首先了解一下es6的新方法Object.assign(),主要用于合并对象、清空数组
由上图可知,assign()的参数可以有多个,第一个参数为目标对象,第二个以及第三个第四个..都是源对象,也就是说,如果相同时,所有的源对象属性名和目标对象属性名不源对象键值对都会合并到目标对象中。
如果目标对象中的属性名与源对象中的属性名相同时,则属性将被源对象中的属性覆盖。
这就是清空的原理Object.assign(this._data,this.$options.data())
那这个参数代表的是什么呢?
在学习Vue2时我们知道this指的是组件实例,而组件实例身上有_data属性,它和data的关系牵扯到数据代理,也就是说_data中的数据就是data中的数据(包含数据),而this.$options.data(),我们可以在实战中打印一下他看看
我们可以看到这个返回的是一个只有属性名,没有属性值的对象,这正是我们所需要的一种状态,所以我们要将data中的数据全部清除,就需要使用
Object.assign(this._data,this.$options.data())
这样我们就将表单或者表格中的数据置空了,在点击取消或者保存的时候,触发这个合并,就可以置空数据