• 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.要添加的值

在需要改变整个数组的值的时候,使用Object.assign和$set并不能有很好的体验效果(新增的是键值),所以可以使用push、filter、等方法改变原数组值

关注公众号bug人生回复“资料”可获得vue\nodejs一系列视频教程
在这里插入图片描述

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

Logo

前往低代码交流专区

更多推荐