对 Object.assign 的理解

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 4, c: 5 };

// 第一个参数是目标对象 
// 第二个是源对象 
// 源对象可以是多个
let obj3 = Object.assign(obj1 , obj2 )

console.log(obj1) // { a: 1, b: 4, c: 5 }
console.log(obj3) // { a: 1, b: 4, c: 5 }

// Object.assign 方法执行的是浅拷贝
// 被 Object.assign 方法赋值的变量和目标对象的某个属性有改动，则两个对象都会变化

obj1.a = 123
obj1.b = 456
obj3.c = 789
console.log(obj1) //{ a: 123, b: 456, c: 789 }
console.log(obj3) //{ a: 123, b: 456, c: 789 }

我的用处

在 vue 中向后端发送请求调取接口后可以通过 Object.assign 将有用的值赋值到this中

data中的数据

data() {
    return {
        name: '',
        age: ''
    }
}

methods中的方法

methods: {
	//假装我在初始化
    initialize() { 
    	// 假装我是接口
        Interface().then((res) => {
        	// 利用结构赋值将返回的 res 中的数据解构，方便后续使用
            let { code, data, message } = res
            if (code === '00') {
            // 定义一个对象，将res中需要的属性单独抽离，与vue实力用的属性进行合并。
            // 根据 Object.assign 本身特性，如果源对象和目标对象中的属性相同，目标对象中的属性将被覆盖
                Object.assign(this, {
                    name: data.name,
                    age: data.age
                })
            } else {
                this.$message.warning(message)
            }
        }).catch((err) => {
            this.$message.error('服务器繁忙请稍后再试！')
        });
    }
}

created中的导入

created() {
    this.initialize()
}