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

相关推荐
却话巴山夜雨时i15 小时前
295. 数据流的中位数【困难】
java·服务器·前端
云技纵横15 小时前
Vue无限滚动实战——从原理到企业级优化方案
前端
细心细心再细心15 小时前
响应式记录
前端·vue.js
apollo_qwe15 小时前
基于 uView 的 u-picker 自定义时分秒选择器实现(支持反显)
uni-app
北辰alk15 小时前
Vue打包后静态资源图片失效?一网打尽所有解决方案!
vue.js
干就完了115 小时前
关于git的操作命令(一篇盖全),可不用,但不可不知!
前端·javascript
hjt_未来可期15 小时前
js实现替换输入框中选中的文字
javascript·vue.js
之恒君15 小时前
JavaScript 垃圾回收机制详解
前端·javascript
是你的小橘呀15 小时前
像前任一样捉摸不定的异步逻辑,一文让你彻底看透——JS 事件循环
前端·javascript·面试
Cache技术分享15 小时前
260. Java 集合 - 深入了解 HashSet 的内部结构
前端·后端