【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})

相关推荐
出征4 小时前
Pnpm的进化进程
前端
屿小夏4 小时前
openGauss020-openGauss 向量数据库深度解析:从存储到AI的全栈优化
前端
Y***98514 小时前
【学术会议论文投稿】Spring Boot实战:零基础打造你的Web应用新纪元
前端·spring boot·后端
q***33374 小时前
SpringMVC新版本踩坑[已解决]
android·前端·后端
亿元程序员5 小时前
做了十年游戏,我才意识到:程序员最该投资的,是一台专业的编程显示器
前端
IT_陈寒5 小时前
Python高手都在用的5个隐藏技巧,让你的代码效率提升50%
前端·人工智能·后端
源码技术栈5 小时前
什么是云门诊系统、云诊所系统?
java·vue.js·spring boot·源码·门诊·云门诊
lcc1875 小时前
Vue3 ref函数和reactive函数
前端·vue.js
艾小码5 小时前
还在为组件通信头疼?defineExpose让你彻底告别传值烦恼
前端·javascript·vue.js
gnip5 小时前
docker总结
前端