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

相关推荐
six+seven13 小时前
Node.js内置模块fs
前端·node.js
少莫千华13 小时前
【HTML】CSS绘制奥运五环
前端·css·html
沛沛老爹13 小时前
Web开发者转型AI安全核心:Agent Skills沙盒环境与威胁缓解实战
java·前端·人工智能·安全·rag·web转型升级
仰泳之鹅13 小时前
【杂谈】C语言中的链接属性、声明周期以及static关键字
java·c语言·前端
2501_9403152613 小时前
【无标题】(leetcode933)最近的请求次数
java·前端·javascript
每天吃饭的羊13 小时前
LeetCode 第一题
前端
入门级前端开发13 小时前
vue集成xlsl实现前端表格导入导出
前端·javascript·vue.js
小二·13 小时前
Python Web 开发进阶实战:联邦学习平台 —— 在 Flask + Vue 中构建隐私保护的分布式 AI 训练系统
前端·python·flask
一人の梅雨13 小时前
中国制造网商品详情接口进阶实战:跨境场景下的差异化适配与问题攻坚
java·前端·javascript
无知的小菜鸡14 小时前
React:使用高阶组件实现vue中的路由守卫功能
前端·vue.js·react.js