-
与Vue2.x中watch配置功能一致
-
两个小"坑":
- 监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)。
- 监视reactive定义的响应式数据中某个属性时:deep配置有效。
js//情况一:监视ref定义的响应式数据 watch(sum,(newValue,oldValue)=>{ console.log('sum变化了',newValue,oldValue) },{immediate:true}) //情况二:监视多个ref定义的响应式数据 watch([sum,msg],(newValue,oldValue)=>{ console.log('sum或msg变化了',newValue,oldValue) }) /* 情况三:监视reactive定义的响应式数据 若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue!! 若watch监视的是reactive定义的响应式数据,则强制开启了深度监视 */ watch(person,(newValue,oldValue)=>{ console.log('person变化了',newValue,oldValue) },{immediate:true,deep:false}) //此处的deep配置不再奏效 //情况四:监视reactive定义的响应式数据中的某个属性 watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job变化了',newValue,oldValue) },{immediate:true,deep:true}) //情况五:监视reactive定义的响应式数据中的某些属性 watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{ console.log('person的job变化了',newValue,oldValue) },{immediate:true,deep:true}) //特殊情况 watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job变化了',newValue,oldValue) },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效
VUE3——watch函数
CaseyWei2024-03-27 20:09
相关推荐
Mintopia1 分钟前
BVH:光线追踪里的空间管家Mintopia7 分钟前
Three.js 射线拾取原理:像素世界的侦探故事掘金安东尼26 分钟前
前端周刊第421期(2025年7月1日–7月6日)摸鱼仙人~28 分钟前
深入理解 classnames:React 动态类名管理的最佳实践未来之窗软件服务30 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDEkymjs张涛31 分钟前
零一开源|前沿技术周报 #6玲小珑34 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成天天鸭40 分钟前
写个vite插件自动处理系统权限,降低99%重复工作蓝婷儿1 小时前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标