Vue实战踩坑&经验

需求-问题

在生产中，由这样的一个需求：重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？

image-20230530204429572

解决方案

① 逐个赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
data() {
	return {
		name: '',
		sex: '',
		desc: '',
        
  ------省略-------
        
	}
}
...

// 逐个赋值
this.name = ''
this.sex = ''
this.desc = ''

很明显，这个方法比较笨，当然也可以实现效果，但是一个一个去重新赋值比较麻烦而且代码看起来也会比较乱。

那么，有如何做才能==更优雅==？

② 使用 Object.assign()

MDN关于该方法的介绍：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
用法： Object.assign(target, ...sources)
第一个参数是目标对象，第二个参数是源对象，就是将源对象属性复制到目标对象，返回目标对象

其中就是将一个对象的属性copy到另一个对象

Vue中：
this.$data 获取当前状态下的 data
this.$options.data() 获取该组件初始状态下的 data

所以，下面就可以==将初始状态的data复制到当前状态的data，实现重置效果==：

1
Object.assign(this.$data, this.$options.data())

当然，如果你只想重置data中的某一个对象(如：form表单)或者属性：

1
this.form = this.$options.data().form

扩展

Object.assign()的用法

1、Object.assign() 方法的第一个参数是目标对象，后面的参数都是源对象，Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

1
2
3
4
5
6
7
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

==注意：==如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

1
2
3
4
5
6
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 } 属性取最后一个对象的属性

Object.assign() 是深拷贝还是浅拷贝？

什么是深拷贝、浅拷贝？

  • 对象的浅拷贝：浅拷贝是对象共用的一个内存地址，对象的变化相互影响。
  • 对象的深拷贝：简单理解深拷贝是将对象放到新的内存中，两个对象的改变不会相互影响。

测试1：

1
2
3
4
5
6
7
8
9
10
let srcObj = {'name': 'lilei', 'age': '20'};
let copyObj2 = Object.assign({}, srcObj);
console.log('srcObj', srcObj);		//'name': 'lilei', 'age': '20'
console.log('copyObj2', copyObj2);	//'name': 'lilei', 'age': '20'
srcObj.name="zhangsan";
console.log('srcObj', srcObj);		//'name': 'zhangsan', 'age': '20'
console.log('copyObj2', copyObj2);	//'name': 'lilei', 'age': '20'
copyObj2.age="10";
console.log('srcObj', srcObj);		//'name': 'zhangsan', 'age': '20'
console.log('copyObj2', copyObj2);	//'name': 'lilei', 'age': '10'

从上面可以看出我们使用 Object.assign() 将 srcobj 的属性拷贝到了copyobj2中，而当我们修改 srcobj（源对象）的属性或是copyobj2（目标对象）的属性时，变化的只有对象本身，这样看来是深拷贝啊，别着急下结论我们继续测试；

测试2：

1
2
3
4
let srcObj = {'name': 'lilei', 'grade': {'chi':"80", 'eng':"100"}};
let copyObj2 = Object.assign({}, srcObj);
console.log('srcObj', srcObj);		//name: "lilei" grade: {chi: "80", eng: "100"}
console.log('copyObj2', copyObj2);	//name: "lilei" grade: {chi: "80", eng: "100"}

还是和上面一样，我们先将srcobj对象的属性拷贝到目标对象中，正常打印输出；

1）首先我们在上面代码的基础上修改源对象的属性：

1
2
3
4
5
6
7
let srcObj = {'name': 'lilei', 'grade': {'chi':"80", 'eng':"100"}};
let copyObj2 = Object.assign({}, srcObj);
srcObj.name="zhangsan";
srcObj.grade.chi="10";
console.log('srcObj', srcObj);		//name: "zhangsan" grade: {chi: "10", eng: "100"}
console.log('copyObj2', copyObj2);	//name: "lilei" grade: {chi: "10", eng: "100"}

2）我们试试修改目标对象的属性，看看对源对象有什么影响：

1
2
3
4
5
6
7
let srcObj = {'name': 'lilei', 'grade': {'chi':"80", 'eng':"100"}};
let copyObj2 = Object.assign({}, srcObj);
copyObj2.name="zhangsan";
copyObj2.grade.chi="50";
console.log('srcObj', srcObj);		//name: "lisi" grade: {chi: "50", eng: "100"}
console.log('copyObj2', copyObj2);	//name: "zhangsan" grade: {chi: "50", eng: "100"}

==分析==：从例子中可以看出，当我们修改目标对象的属性值时，源对象的name没有变化，但是 grade.chi 却被改变了（修改源对象的属性也是同理），因此我们可以看出Object.assign()拷贝的只是属性值，假设源对象的属性值是一个指向对象的引用，那么它也只拷贝那个引用值。

==总结==：也就是说，对于Object.assign()而言，如果对象的属性值为简单类型（string，number），通过Object.assign({},srcobj);得到的新对象为深拷贝；如果属性值为对象或其他引用类型，那对于这个对象而言其实是浅拷贝的，这是Object.assign()特别需要注意的地方。

另外多说一句，Object.assign({},src1,src2);对于src1和src2之间相同的属性是直接覆盖的，如果属性值为对象，是不会对对象直接的属性进行合并的。

==补充：Object.assign不会在那些源对象值为null或undefined的时候抛出错误。==