Object.assign与vue $set

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()

Object.assign与vue $set相关推荐

【一语点醒梦中人】如何优雅地合并两个JSON对象 → Object.assign(a, b)和Object.assign({}, a, b)的区别
var a = {a: 1}; var b = {b: 2}; var c = Object.assign(a, b);/* a对象也会改变,b不变,返回被被修改对象 */ var d = Objec ...
JavaScript 复制对象与Object.assign方法无法实现深复制
在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...
Object.assign()
定义: 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象. 语法: object.assign(target,. . .sources); target: 目标对象. sou ...
assign深拷贝_经典前端面试题: Object.assign 是浅拷贝还是深拷贝？实现深拷贝的方法有哪些？...
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖.后面的源对象的属性将类 ...
原生js实现Object.assign和Object.create
Object.assign(target,-sources) Object.assign(target,-source)方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象.它将返回目标对象 ...
ecma 2018, javascript spread syntax behaves like Object.assign
as the subject. It is only supported in Chrome version 60+, so, first check the version, or just use ...
扩展运算符，Object.assign
2019独角兽企业重金招聘Python工程师标准>>> assign或者...扩展符都是浅拷贝对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 ...
JavaScript深入理解对象方法——Object.assign()
Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ... ...
Object.create()和Object.assign()
一.Object.create() 该方法用于创建一个新对象,并为其指定原型对象和属性. 语法:Object.create(prototype,description); proto:(必须),表示新 ...

Object.assign与vue $set

Object.assign与vue $set相关推荐

最新文章

热门文章