【Vue3】watch 监视 ref 定义的数据

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用 watch 函数监视 ref 定义的数据。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assets 和 components 目录。

3> 修改 src 目录下 main.ts。

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 重写 Vue 根组件 App.vue，监视 ref 定义的基本类型数据。

<template><div class="person"><h1>监视 ref 定义的基本类型数据</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="growUp">长大</button></div>
</template><script setup lang="ts" name="App">
import { ref, watch } from 'vue'const name = ref('Harry Potter')
const age = ref(10)function growUp() {age.value += 1
}// 监视
const stopWatch = watch(age, (newValue, oldValue) => {console.log('%s 又长大一岁，从 %d 岁到 %d 岁', name.value, oldValue, newValue)if (newValue >= 18) {console.log('%s 成人了，可以不用再监护了', name.value)stopWatch()}
})
</script><style scoped></style>

5> 执行 npm run dev 命令启动应用，浏览器访问 http://localhost:5173/，点击页面中 长大 功能按钮，观察日志打印。

6> 重写 Vue 根组件 App.vue，监视 ref 定义的对象类型数据。

<template><div class="person"><h1>监视 ref 定义的对象类型数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="growUp">长大</button><button @click="replace">换人</button></div>
</template><script setup lang="ts" name="App">
import { ref, watch } from 'vue'const person = ref({name: 'Harry Potter',age: 10,
})function growUp() {person.value.age += 1
}function replace() {person.value = {name: '赫敏·格兰杰',age: 11,}
}// 监视
const stopWatch = watch(person, (newValue, oldValue) => {console.log('人员信息变更，从 %o 变成 %o', oldValue, newValue)if (newValue.age >= 18) {console.log('%s 成人了，可以不用再监护了', person.value.name)stopWatch()}
}, {deep: true
})
</script><style scoped></style>

7> 执行 npm run dev 命令启动应用，浏览器访问 http://localhost:5173/，点击页面中 长大 和 换人 功能按钮，观察日志打印。

参数说明

watch 函数参数包括：

• 参数一：监视的数据源，本示例中是 ref 定义的基本类型或对象类型数据。
• 参数二：监视的数据源发生变化时触发的回调函数，此回调函数含 2 个参数：
  • 参数一：监视数据源变化后的新值。
  • 参数二：监视数据源变化前的旧值。
• 参数三：监视配置对象，包括：
  • deep: true：开启深度监视，监视 ref 定义的对象类型数据时，只有开启了深度监视，才能在对象属性发生变化时触发回调。
  • immediate: true：watch 默认是懒执行的，仅当数据源变化时才会执行回调，使用此配置可以在创建监视器时立即执行一次回调。
  • once: true：watch 默认是每次数据源变化都会触发回调函数的执行，使用此配置在数据源变化时仅触发一次。