【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
默认是每次数据源变化都会触发回调函数的执行,使用此配置在数据源变化时仅触发一次。