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

相关推荐
Yff_world2 分钟前
网络安全与 Web 基础笔记
前端·笔记·web安全
Sapphire~3 分钟前
Vue3-19 hooks 前端数据和方法的封装
前端·vue3
浩宇软件开发11 分钟前
基于OpenHarmony鸿蒙开发医院预约挂号系统(前端后端分离)
前端·华为·harmonyos
裴嘉靖14 分钟前
uni-app 打包后 PDF 无法生成问题完整解决方案
pdf·uni-app
嘿是我呀19 分钟前
【用npm安装node时报错“npm 无法加载文件”】
前端·npm·node.js
干前端20 分钟前
Vue3 组件库工程化实战:BEM 命名规范与 useNamespace 深度解析
前端·css
弓弧名家_玄真君21 分钟前
在ubuntu中安装redis
前端·bootstrap·mybatis
RFCEO23 分钟前
学习前端编程:DOM 树、CSSOM 树、渲染树详解
前端·学习·渲染树·dom 树·cssom 树·浏览器的渲染流程·回流/重绘
笨蛋不要掉眼泪25 分钟前
Redis主从复制:原理、配置与实战演示
前端·redis·bootstrap·html
bigdata-rookie29 分钟前
Starrocks 数据模型
java·前端·javascript