Vue.js中watch失效的常见场景及解决方案是什么？

本文共计733个文字，预计阅读时间需要3分钟。

使用过`watch`的，应该知道码经历过一次失败。比如，我们监听对象的时刻，在没踩坑前，很容易这样写：但是，这里的`watch`是无效的！！！因为`obj`是引用类型！引用类型的指针是。

使用过watch的，应该起码经历过一次失效。

比如，我们监听对象的时候，在没有踩坑之前，很容易这样写：

但是，❌，这里的watch是无效的!!!

因为 obj 是引用类型！！！

引用类型的指针是固定的，所以如果不是重新赋值，那么其赋值的变量自然也不会发生变化。

举个例子：

let obj = { a: 1 }; let obj1 = obj; let obj2 = { ...obj }; obj1.a = 2; obj2.a = 3; // 这里肯定是true，因为obj和obj1都是同一个指针，不明白的搜下引用类型 console.log(obj1 === obj); // 这里肯定是false，因为指针不同 console.log(obj2 === obj);

怎么解决呢？也简单！

设置deep:true，这样obj中的属性发生变化（可被监测到的），便会执行 handler 函数；。

！！！注意，因为是引用类型，所以newValue 和oldValue始终相等，千万不要犯傻的写相等就return，那就永远也不往下走了。。。。