这篇文章主要介绍了vue.js watch总失效什么情况，如何解决相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue.js watch总失效什么情况，如何解决文章都会有所收获，下面我们一起来看看吧。

使用过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，那就永远也不往下走了。。。。

监测数组

引用类型，除了对象，很容易想到数组，那数组是不是也需要这样写呢。
话分两头：

• 数组项是对象类型，就需要deep
• 数组项是值类型，就不需要deep

因为vue2里，数组被特殊处理了，跟 obj 不等同，所以需要分情况。

也就是数组项是值类型的话，直接这么写就行：

对象类型的话，上面是不行的，先举个错误 的例子：

不打印的原理，依然是数组项是对象类型，想watch对象类型，必须加deep

正确做法 ：

watch:{
 arr: {
 handler(newValue) {
  // 这里就可以打印了
  console.log(newValue);
 },
 deep: true
 },
}

总结

watch失效的场景：

• 对象类型
• 数组项为对象类型的数组

解决方案：加deep:true。

watch的其他属性

官网文档

• 一开始就需要执行watch的话，可 immediate属性
• handle可以是一个数组
• 取消watch的话，this.$unwatch
• watch对象的某个属性的话，'obj.key'(){}
• 如果想同时检测两个属性，懒得一个个写的话，有个偷懒的法子用computed做中间层。

computed:{
 fullName(){return this.firstName + this.lastName}
},
watch:{
 fullName(){...}
}

引用

watch的用法

总结

以上就是关于“vue.js watch总失效什么情况，如何解决”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用vue怎样做拖拽排序的功能？

  本文给大家分享用vue怎样做拖拽排序的功能，小编觉得比较实用，因此分享给大家做个参考，实现效果及代码如下，这里提供一种简单的实现方案，感兴趣的朋友可以了解看看。

• Object.freeze能用来做什么，应用场景有哪些

  Object.freeze(obj)可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已经属性，不能修改该对象已有属性的可枚举性、可配置性、可写性、以及不能修改已有属性的值。

• React Diff原理是什么，有哪些应用？

  这篇文章主要介绍了React Diff原理的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下

• 深入了解JS精准计算的实现

  这篇文章主要给大家分享的是JS精准计算的内容，下文有具体的实例及详解，对大家学习和理解JS精准计算有一定的帮助，感兴趣的朋友就跟随小编来学习一下吧。

• vue列表滚动时固定表头或最左列的效果怎样做

  在移动端开发中，会用到列表作为信息展示方式，一般希望上下滚动时，可以固定表头，左右滚动时，可以固定最左列。