Object.assign与vue

Object.assign
Object.assign可以用于js对象浅复制。语法：Object.assign(target, source1, source2);
第一个参数为目标对象，后面的为要合并的对象（源对象）。
例：

let obj={
a:2,
b:4
}
Object.assign({}, obj, {c:6}); // 将{c:6}与obj合并  返回{a:2,b:4,c:6}

当属性名相同时，新增的会覆盖原来的属性

let obj={
a:2,
b:4
}
Object.assign({}, obj, {b:6}); //  返回{a:2,b:6}

Object.assign只会拷贝对象本身的属性，不拷贝继承属性，不拷贝不可枚举对象。

Object.assign可以用来处理数组，但是会把数组视为对象。

Object.assign([1, 2, 3], [4, 5])   // [4, 5, 3]

上面代码中，Object.assign把数组视为属性名为 0 、 1 、 2 的对象，源数组的 0 下标属性4覆盖了目标数组的 0 下标属性1。

vue视图刷新
vue不能检测对象属性的添加和删除（已创建的实例上动态添加和修改根级响应式属性），在官方文档中推荐使用vm.set方法

this.$set(this.someObject,'b',2)    //Vue.set(vm.someObject, 'b', 2)

例：

let app = new Vue({    //已经创建的实例
el: '#app', 
data () {
	 return {
	        name: 'zhangsan'             //    根级响应属性
	    } 
	}
 }) 
  app.age = 'lisi'                    // 这个age不响应

这时就可以使用vm.set：

this.$set(this.data, 'age', 'lisi')

也可以使用Object.assign() 或 _.extend()来添加新的属性，但是要创建一个新的对象。

this.data = Object.assign({}, this.data, { age:'lisi' })  //这里{} 就是创建的新的对象

Vue不能检测到通过索引和改变长度修改值的数组
例：

data () {
    return {
      newA: [5, 6, 7, 8, 9]
    }
 ......
this.newA[4] = 4     //不能检测到更新
this.newA.length =  5     //不能检测到更新

这时可以使用vm.set：

this.$set(this.newA, 4, 8888888)

使用object.assign：

this.newA = Object.assign([], this.newA, this.newA[4] = 9999)

使用splice:

this.newA.splice(4, 1, 99999)     //参数分别为：1.要删除/添加的下标，2.要删除的项数，0为不删除，3.要添加的值

改变原始数组的都可以用，比如该有push，得到新数据的可以通过赋值给一个新对象来改变，比如filter

参考文章Vue 2.0的学习笔记： Vue中的响应式
 深入响应式原理
 ES6对象方法Object.assign()

猜你喜欢