使用过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,那就永远也不往下走了。。。。
引用类型,除了对象,很容易想到数组,那数组是不是也需要这样写呢。
话分两头:
因为vue2里,数组被特殊处理了,跟 obj 不等同,所以需要分情况。
也就是数组项是值类型的话,直接这么写就行:
对象类型的话,上面是不行的,先举个错误 ❌ 的例子:
不打印的原理,依然是数组项是对象类型,想watch对象类型,必须加deep
正确做法 ✅:
watch:{ arr: { handler(newValue) { // 这里就可以打印了 console.log(newValue); }, deep: true }, }
watch失效的场景:
解决方案:加deep:true。
computed:{ fullName(){return this.firstName + this.lastName} }, watch:{ fullName(){...} }
到此这篇关于vue.js watch经常失效的场景与解决方案的文章就介绍到这了,更多相关vue.js watch失效的场景与解决内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
1.有时候,那些清晨时最坚强的人,正是那些夜里哭着哭着睡着的人。 2.总有一个...
由于工作所需,最近花时间研究了html转换为pdf的功能。html转换为pdf的关键技术...
作者个人研发的在高并发场景下,提供的简单、稳定、可扩展的延迟消息队列框架,...
本文介绍了JSP编程技术实现一个简单的购物车程序,具体如下: 1 问题描述 利用JS...
常见信号介绍 SIGINT 2 CtrlC时OS送给前台进程组中每个进程 SIGABRT 6 调用abort...
XML/HTML Code 复制内容到剪贴板 input id = username name = username type = t...
当我们学习surface命令时,已经看到了三维作图的一些端倪。在matlab中我么可以调...
Coonamd 对象定义了将对数据源执行的命令,可以用于查询数据库表并返回一个记录...
ASP.Net Core的跨域设置比较简单 官方都整合了 具体的参见微软官方文档: https:...
第二题 2021年4月4日 腾讯笔试编程题第二题 描述 给出一个有0-9的数字组成的字符...