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

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

特别注意：watch要合理使用，不要导致互相监听互相操作导致死循环的情况。

解决方法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