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

相关推荐
代码丰1 分钟前
简历保险箱:一款本地存储、快捷填表的 Chrome 简历助手
前端·chrome
SuperEugene2 分钟前
Promise 从入门到实战:同步异步、回调地狱、then/catch/finally 全解
前端·javascript·面试
前端 贾公子2 分钟前
uniapp 小程序获取后端的二进制 保存到手机相册
java·前端·javascript
qq_437100665 分钟前
echarts图表相关 电量进度图
前端·flask·echarts
Thomas.Sir15 分钟前
Vue 3:现代前端框架的架构革命
前端·vue.js·web·大前端
SouthRosefinch16 分钟前
三、HTML文本、语义化、列表与表格
前端·html5
清空mega17 分钟前
《Vue3 模板语法与常用指令详解:插值、绑定、件、条件渲染、列表渲染一次学会》
前端·javascript·vue.js
周淳APP17 分钟前
【HTTP相关及RESTful】风萧萧兮易水寒之壮士学习不复返
前端·javascript·网络·网络协议·http·restful·jsonp
gyx_这个杀手不太冷静19 分钟前
OpenCode 进阶使用指南(第四章:企业级功能)
前端·ai编程
周淳APP23 分钟前
【计算机网络之HTTP、TCP、UDP、HTTPS、Socket网络连接】
前端·javascript·网络·网络协议·http·前端框架