其他分享
首页 > 其他分享> > vue-监听对象失效解决方法/Object.assign/深浅copy

vue-监听对象失效解决方法/Object.assign/深浅copy

作者:互联网

watch中已设置了deep属性为true,监听不触发,可能原因,监听的是一个对象,受JavaScript的限制,vue不能检测到对象属性的添加或删除。

解决方法1:
Vue.set(object,key,value)
eg:
Vue.set(this.params,"year","2022");

解决方法2:
this.$set(this.object,key,value)
eg: 
this.$set(this.params,"year","2022");

解决方法3:
Object.assign({},this.obj)
eg:
let temp = {
    "year" : '2022'
};
this.params= Object.assign({}, temp);

Object.assign是什么?

1.Object.assign()是ES6提供的一个方法。用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

2.用法: Object.assign(target, ...sources)

3.如果有同名属性的话,后面的属性值会覆盖前面的属性值。

4.Object.assign()是浅copy,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。

5.需要深度copy可以使用lodash工具库:

lodash浅copy:
_.clone(value);
lodash深copy:
_.cloneDeep(value);

 

参考链接:https://blog.csdn.net/guxin_duyin/article/details/88916106

参考链接:https://segmentfault.com/a/1190000014826146

 

标签:vue,Object,value,set,copy,assign,属性
来源: https://www.cnblogs.com/duiyuedangge/p/16383841.html