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

相关推荐
技术净胜5 小时前
Python 操作 Cookie 完全指南,爬虫与 Web 开发实战
前端·爬虫·python
神奇的程序员5 小时前
Nginx日志分析工具-NginxPulse开源了
前端
我是小疯子666 小时前
前端开发入门:HTML、CSS与JS学习指南
前端
知了清语6 小时前
是的,微信小程序的 show-menu-by-longpress 真的会让你无语
前端
Hao_Harrision6 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RangeSlider(范围滑块组件)
前端·typescript·react·tailwindcss·vite7
CC码码6 小时前
不修改DOM的高亮黑科技,你可能还不知道
前端·javascript·面试
虚诚6 小时前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
wuhen_n7 小时前
Promise与async/await
前端
LYFlied7 小时前
前端路由核心原理深入剖析
前端
用户19017684478657 小时前
vue3规范化示例
前端