【Uniapp-Vue3】watch和watchEffect监听的使用

想要使用watch监听需要引入watch:

import {watch} from "vue";

监听某一个变量(浅层监听):

watch(变量名, (newValue, oldValue)=>{...})

我们监听变量num,通过输入input去改变num的值:

监听对象中的某一个属性(深度监听):

watch(()=>变量名.value.属性名, (newValue, oldValue)=>{...})

如果我们想要对该对象的所有属性都进行深度监听,则使用如下写法:

watch(变量名, (newValue, oldValue)=>{...}, {deep:true})

我们使用如下写法以后修改person中的所有属性都会触发watch:

注意:开启全属性深度监听会在一定程度上降低代码的性能

程序启动时立即进行一次监听:

watch(变量名, (newValue, oldValue)=>{...}, {deep:true, immediate:true})

相关推荐
EndingCoder15 分钟前
配置 tsconfig.json:高级选项
linux·前端·ubuntu·typescript·json
木风小助理20 分钟前
JavaStreamAPI的性能审视,优雅语法背后的隐形成本与优化实践
java·前端·数据库
QQ588501981 小时前
Python_uniapp-心理健康测评服务微信小程序的设计与实现
python·微信小程序·uni-app
white-persist1 小时前
轻松抓包微信小程序:Proxifier+Burp Suite教程
前端·网络·安全·网络安全·微信小程序·小程序·notepad++
三天两行代码1 小时前
uniapp 微信小程序实现ai问答功能流式输出makdown解析实现打字机效果(附源码)
微信小程序·小程序·uni-app
三天不学习1 小时前
从开发到上架:手把手教你将uni-app微信小程序打包发布(全网最全指南)
微信小程序·uni-app·notepad++
敲敲了个代码2 小时前
多标签页强提醒不重复打扰:从“弹框轰炸”到“共享待处理队列”的实战
java·前端·javascript·面试·架构
木子啊3 小时前
UniApp原生Office预览组件上线
uni-app·在线预览·预览文件·office预览文件
不想上班只想要钱3 小时前
动态类名在 <swiper-slide 的复制项中没有起作用的解决方法
前端·vue.js
weixin_395448913 小时前
tidl_import_mul_rmfsd_psd_u8_3x480x544_bise_raw_dynamic.txt
java·服务器·前端