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

相关推荐
前端_yu小白11 小时前
websocket在vue项目和nginx中的代理配置
vue.js·websocket·nginx·vue3·服务端推送
我命由我1234511 小时前
微信小程序 - 页面跳转并传递参数(使用路由参数、使用全局变量、使用本地存储、使用路由参数结合本地存储)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
DJ斯特拉11 小时前
日志技术Logback
java·前端·logback
00后程序员张11 小时前
数据流抓包实战指南,TCPUDP 流量分析、HTTPS 解密与多工具协同方案
网络协议·http·ios·小程序·https·uni-app·iphone
+VX:Fegn089511 小时前
计算机毕业设计|基于springboot + vue二手交易管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
HIT_Weston11 小时前
49、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 单/多线程分析(一)
前端·ubuntu·gitlab
涔溪11 小时前
Vue3 中ref和reactive的核心区别是什么?
前端·vue.js·typescript
天意__11 小时前
Flutter开发,scroll_to_index适配flutter_list_view
前端·flutter
吉星9527ABC11 小时前
表示离散量的echarts图型示例
前端·arcgis·echarts·离散量web展示
光影少年11 小时前
web3学习路线
前端·学习·前端框架·web3