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

相关推荐
2501_9160088921 分钟前
没有源码如何加密 IPA 实战流程与多工具组合落地指南
android·ios·小程序·https·uni-app·iphone·webview
烛阴32 分钟前
从零开始掌握C#核心:变量与数据类型
前端·c#
han_37 分钟前
前端高频面试题之Vuex篇
前端·vue.js·面试
qq_415216251 小时前
vue3搭建项目yarn+vue3+webpack+less+element-plus
前端·webpack·less
天天向上10241 小时前
VueUse的使用
前端·vue.js·vscode
FREE技术1 小时前
学生成绩管理系统 基于java+springboot+vue实现前后端分离项目并附带万字文档(源码+数据库+万字详设文档+软件包+安装教程)
java·vue.js·spring boot·mysql
猪猪拆迁队2 小时前
前端图形引擎架构设计:双引擎架构设计
前端·后端·架构
LXA08092 小时前
UniApp 小程序中使用地图组件
小程序·uni-app·notepad++
宋辰月3 小时前
学习react第三天
前端·学习·react.js
bug总结3 小时前
更新原生小程序封装(新增缓存订阅)完美解决
前端·缓存·小程序