2018W30—$set()和Object.assign()

一、$set()

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的

例如：

 <pre>
      学生信息
      name： {{student.name}}
      sex： {{student.sex}}
      age： {{student.age}}
 </pre>

 data () {
    return {
      student: {
        name: '老葛',
        sex: '男'
      }
    }
  }，

  mounted () {
    this.student.age = 40
  }

向student中添加一个新的属性age并赋值，运行结果如下：

学生信息

name： 老葛

sex： 男

age： 

通过运行结果发现虽然给age赋了值，但是视图没有触发更新

原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。

用法：this.$set(this.data,”key”,value)

mounted () {
    this.$set(this.student,"age", 40)
}

运行结果如下：

学生信息

name： 老葛

sex： 男

age： 40

二、Object.assign()

Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。用法：Object.assign(target, source1, source2)。第一个参数是目标对象，后面的参数都是源对象。需要注意的是，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

const target = { a: 1, b: 1 }
const source1 = { b: 2, c: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2)

返回target的值：{a:1, b:2, c:3}

 如果只有一个参数，Object.assign会直接返回该参数，如果该参数不是对象，则会先转成对象，然后返回。如果非对象参数出现在源对象的位置，这些参数都会转成对象。数值、字符串和布尔值不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

const v1 = 'abc'
const v2 = true
const v3 = 10
const obj = Object.assign({}, v1, v2, v3);
console.log(obj) 

返回结果：{ "0": "a", "1": "b", "2": "c" }