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

相关推荐
J***Q2923 分钟前
前端路由,React Router
前端·react.js·前端框架
1***81534 分钟前
前端路由参数传递,React与Vue实现
前端·vue.js·react.js
q***136135 分钟前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
xixixi777772 小时前
了解一下Sentry(一个开源的实时错误监控平台)
前端·安全·开源·安全威胁分析·监控·sentry
Keely402852 小时前
学习编写chrome插件:Hello World 扩展
前端·chrome
hhcccchh3 小时前
学习vue第三天 Vue 前端项目结构的说明
前端·vue.js·学习
源力祁老师3 小时前
Odoo 19 制造与会计集成深度解析
前端·javascript·制造
iFlow_AI3 小时前
iFlow CLI Hooks 「从入门到实战」应用指南
开发语言·前端·javascript·人工智能·ai·iflow·iflow cli
漂流瓶jz4 小时前
SourceMap数据生成核心原理:简化字段与Base64VLQ编码
前端·javascript·算法