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

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

背景

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

简介

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

开发环境

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

开发步骤及源码

1> 创建 Vue3 工程,参考:【Vue3】工程创建及目录说明

2> 删除 src 目录下 assetscomponents 目录。

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: truewatch 默认是懒执行的,仅当数据源变化时才会执行回调,使用此配置可以在创建监视器时立即执行一次回调。
    • once: truewatch 默认是每次数据源变化都会触发回调函数的执行,使用此配置在数据源变化时仅触发一次。
相关推荐
知识分享小能手18 小时前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
wxr06161 天前
部署Spring Boot项目+mysql并允许前端本地访问的步骤
前端·javascript·vue.js·阿里云·vue3·springboot
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
sniper_fandc2 天前
Vue3双向数据绑定v-model
前端·vue
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
叫兽~~2 天前
vite vue 打包后运行,路由首页加载不出来
vue.js·vue
岁岁岁平安4 天前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
硅谷工具人4 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin5 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型