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

相关推荐
木易士心9 小时前
如何优化v-if和v-for的性能?
前端·javascript
三年三月10 小时前
浏览器地址栏回车 vs 点击刷新按钮的缓存行为差异分析
前端·javascript
码农刚子10 小时前
ASP.NET Core Blazor 核心功能一:Blazor依赖注入与状态管理指南
前端·后端
胖虎26510 小时前
基于Vue3+xgplayer 移动端直播解决方案
前端
用户40993225021210 小时前
Vue 3模板如何通过编译三阶段实现从声明式语法到高效渲染的跨越
前端·ai编程·trae
2501_9160074710 小时前
从零开始学习iOS App开发:Xcode、Swift和发布到App Store完整教程
android·学习·ios·小程序·uni-app·iphone·xcode
小左OvO10 小时前
基于百度地图JSAPI Three的城市公交客流可视化(二)——区域客流
前端·javascript·vue.js
小左OvO10 小时前
基于百度地图JSAPI Three的城市公交客流可视化(三)——实时公交
前端·javascript·vue.js
IT_陈寒10 小时前
Vite 5新特性解析:10个提速技巧让你的开发效率翻倍 🚀
前端·人工智能·后端
焦糖小布丁10 小时前
通配符证书能给几个网站用?
前端