vue.js watch经常失效的场景与解决方案
更新时间：2021年01月07日 10:27:26 作者：颜酱
这篇文章主要给大家介绍了关于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(){...}
}
引用
总结
到此这篇关于vue.js watch经常失效的场景与解决方案的文章就介绍到这了,更多相关vue.js watch失效的场景与解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue3 Pinia获取全局状态变量的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
Vue中使用Echarts可视化图表宽度自适应的完美解决方案
这篇文章主要介绍了Vue中使用Echarts可视化图表，宽度自适应解决方案,我的解决方案是，在放置Echarts的容器(div)外层再套一层容器(div)，外层容器宽度固定设置手机屏幕宽，感兴趣的朋友跟随小编一起看看吧2022-09-09
这篇文章主要介绍了如何用vue-pdf包实现pdf文件预览,支持分页问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue中touch和click共存的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家介绍了VueUse使用及造轮子选择对比示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
本文主要介绍了el-tree文字显示不全的解决办法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue-router定义元信息meta操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-12-12
日历在很多地方都可以使用的到，这篇文章主要介绍了如何利用vue3实现简单的日历控件，文中通过示例代码讲解详细，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
LRU算法全称为least recently use 最近最少使用，核心思路是最近被访问的以后被访问的概率会变高，那么可以把之前没被访问的进行删除，维持一个稳定的最大容量值，从而不会导致内存溢出。2021-05-05
mpvue中配置vuex并持久化到本地Storage图文教程解析
这篇文章主要介绍了mpvue中配置vuex并持久化到本地Storage的教程详解,# 配置vuex和在vue中相同，只是mpvue有一个坑，就是不能直接在new Vue的时候传入store。本文分步骤给大家介绍的非常详细，需要的朋友参考下吧2018-03-03
最新评论