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

相关推荐
华仔啊41 分钟前
JavaScript 如何准确判断数据类型?5 种方法深度对比
前端·javascript
毕设十刻1 小时前
基于Vue的迅读网上书城22f4d(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
程序员小寒1 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
开发语言·前端·javascript·面试
爱健身的小刘同学2 小时前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
神秘的猪头2 小时前
Ajax 数据请求:从零开始掌握异步通信
前端·javascript
稀饭522 小时前
用changeset来管理你的npm包版本
前端·npm
TeamDev2 小时前
基于 Angular UI 的 C# 桌面应用
前端·后端·angular.js
Komorebi゛2 小时前
【CSS】斜角流光样式
前端·css
Irene19912 小时前
CSS 废弃属性分类总结
前端·css
青莲8433 小时前
Android 事件分发机制 - 事件流向详解
android·前端·面试