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

相关推荐
_OP_CHEN1 分钟前
前端开发实战深度解析:(一)认识前端和 HTML 与开发环境的搭建
前端·vscode·html·web开发·前端开发
xiAo_Ju9 分钟前
iOS一个Fancy UI的Tricky实现
前端·ios
H***997610 分钟前
Vue深度学习实战
前端·javascript·vue.js
游戏开发爱好者823 分钟前
iOS 商店上架全流程解析 从工程准备到审核通过的系统化实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
toooooop81 小时前
Vuex 中 state、mutations 和 actions 的原理和写法
前端·javascript·uni-app
y***86691 小时前
前端CSS-in-JS方案
前端·javascript·css
暖木生晖1 小时前
APIs之WEB API的基本认知是什么?
前端·dom·dom树·web apis
华仔啊1 小时前
你真的懂递归吗?没那么复杂,但也没那么简单
前端·javascript
火星数据-Tina1 小时前
低成本搭建体育数据中台:一套 API 如何同时支撑比分网与 App?
java·前端·websocket
yddddddy1 小时前
深入浅出前端路由:从概念到实战
前端