当前位置：首页 > ds >正文

Vue3学习（组合式API——Watch侦听器详解）

ds 2025/5/15 5:35:55

目录

一、Watch侦听器。

（1）侦听单个数据。

（2）侦听多个数据。（数组写法？！）

（3）immediate参数。(立即执行回调)

（3）deep参数。(深层监视)

使用deep开启深度侦听监视。（不仅监听对象的地址，还会监听对象的所有子属性变化）

（4）精确侦听对象(ref、reactive)的某个属性。（固定写法的简单回调：()=>xx对象）

一、Watch侦听器。

官方解释：在组合式 API 中，使用 watch 函数在每次响应式状态发生变化时触发回调函数。
基本作用：侦听一个或者多个数据的变化，数据变化时执行回调函数。其中有两个额外的参数：immediate（立即执行）、deep（深度侦听)。

（1）侦听单个数据。

基本语法：watch(ref对象,(newValue,oldValue)=>{ ... })。
代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="changeCount">count+1</button></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const count = ref(0)const changeCount = () => {count.value++;}watch(count, (newValue, oldValue) => {console.log('新值：' + newValue)console.log('旧值：' + oldValue)})return {count,changeCount}}}).mount('#app')</script></body></html>

效果。

（2）侦听多个数据。（数组写法？！）

基本语法：watch([ref对象1,ref对象2...],(newArr,oldArr)=>{ ... })。
代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="changeCount">count+1</button>{{nickname}}<button @click="changeNickname">改昵称</button></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const count = ref(0)const nickname = ref('张三')const changeCount = () => {count.value++;}const changeNickname = () => {nickname.value = '李四'}/* //监听单个数据watch(count, (newValue, oldValue) => {console.log('新值：' + newValue)console.log('旧值：' + oldValue)}) *///监听多个数据watch([count, nickname], (newArr, oldArr) => {console.log('新数组：' + newArr)console.log('旧数组：' + oldArr)})return {count,nickname,changeCount,changeNickname}}}).mount('#app')</script></body></html>

效果。

（3）immediate参数。(立即执行回调)

基本说明：在侦听器创建时——立即触发回调，响应式数据变化之后继续执行回调。
代码示例。（一进页面里面执行回调！）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="changeCount">count+1</button></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const count = ref(0)const changeCount = () => {count.value++;}//immediate，立即执行回调watch(count, (newValue, oldValue) => {console.log('新值：' + newValue)console.log('旧值：' + oldValue)}, {immediate: true})return {count,changeCount,}}}).mount('#app')</script></body></html>

效果。

（3）deep参数。(深层监视)

基本说明：其中默认的watch进行浅层监视（如：const ref1 = ref(简单类型)，可以直接监视）。默认的watch对于“const ref2 = ref(复杂类型)”，监视不到其内部数据的变化！
deep：true。开启监视侦听内部数据的变化。

这种情况只有修改userInfo整个.value，修改了对象的地址才能侦听监视到。因为默认是浅层的。

使用deep开启深度侦听监视。（不仅监听对象的地址，还会监听对象的所有子属性变化）

代码示例。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="changeCount">count+1</button><div>----------------------------------------------------</div>{{userInfo}}<button @click="changeUserInfo">修改userInfo</button></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const count = ref(0)const userInfo = ref({name: 'zs',age: '18'})const changeCount = () => {count.value++;}const changeUserInfo = () => {userInfo.value.age++;}//浅层侦听watch(userInfo, (newValue) => {console.log(newValue)},{deep: true})return {count,userInfo,changeCount,changeUserInfo}}}).mount('#app')</script></body></html>
效果。

（4）精确侦听对象(ref、reactive)的某个属性。（固定写法的简单回调：()=>xx对象）

基本说明：在不开启deep参数的前提下，侦听某个对象的某个属性的变化，且只有该值发生变化时才执行回调！
代码示例。（ref创建的对象、reactive创建的对象）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{userInfo}}<button @click="changeUserInfo">修改userInfo</button><div>----------------------------------------------------</div>{{userInfo2}}<button @click="changeUserInfo2">修改userInfo2</button></div><script type="module">import { createApp, ref, watch, reactive } from './vue.esm-browser.js'createApp({setup() {const userInfo = ref({name: 'zs',age: '18'})const userInfo2 = reactive({name: 'ls',age: '30'})const changeUserInfo = () => {userInfo.value.age++;}const changeUserInfo2 = () => {userInfo2.name = 'wu'}//watch侦听watch(() => userInfo.value.age, (newValue, oldValue) => {console.log('新' + newValue)console.log('旧' + oldValue)})watch(() => userInfo2.name, (newValue, oldValue) => {console.log('新' + newValue)console.log('旧' + oldValue)})return {userInfo,userInfo2,changeUserInfo,changeUserInfo2}}}).mount('#app')</script></body></html>