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

相关推荐
We་ct1 分钟前
LeetCode 137. 只出现一次的数字 II:从基础到最优的两种解法详解
前端·数据结构·算法·leetcode·typescript·位运算
源码站~3 分钟前
基于Spring Boot+Vue3的烹饪交流学习系统 设计与实现
java·vue.js·spring boot·后端·mysql·毕业设计·毕设
星空4 分钟前
前端--A_3--HTML区块_块元素与行内元素
前端·html
如意猴6 分钟前
【前端】001 前端初识——数字世界的门面
前端
不会写DN12 分钟前
Protocol Buffers(.proto)实战入门:Go 生态最常用的接口定义语言
java·前端·golang
小小小米粒16 分钟前
原生 JS:数据和视图「分离」,必须手动同步原生 JS 里,数据是数据,视图是视图,两者完全没关系
前端·javascript·vue.js
摸鱼仙人~19 分钟前
纯前端 Vue 实现共享预览链接方案
前端·javascript·vue.js
happymaker062619 分钟前
VueCli标准化工程中的组件通信操作
开发语言·前端·javascript
Yiyi_Coding22 分钟前
Proxy详解
java·前端·javascript