Vue 3 Watch实现详解：深入理解响应式数据监听

在Vue 3中，watch是一个强大的功能，它允许我们监听Vue实例中的响应式数据变化，并在数据变化变化时执行相应的回调函数。本文将详细介绍Vue 3中watch的用法，包括其基本概念、使用方法以及高级特性。一、基本概念

在Vue 3中，watch函数是组合API的一部分，它允许我们在setup函数中监听响应式引用（ref）或响应式对象（reactive）的变化。watch可以用于监视数据的变化，并在变化时执行回调函数，从而实现数据的自动

二、基本用法

以下是一个简单的手表用法示例：lt；templategt； lt；divgt； lt；h1gt；成员：{{ count }}lt；/ h1gt； lt；button @click="increment"gt；增加lt；/buttongt； lt；/divgt；lt；/templategt；lt；scriptgt；import { ref， watch } from 'vue'；导出 default { setup() { const count = ref(0)； // 监听计数的变化 watch(count， (newValue， oldValue) =gt； { console.log(`粒子从 ${oldValue} 等于 ${newValue}`)； })； functionincrement() { count.value ； } return { count，increment }； }}；lt；/scriptgt；

在这个例子中，我们创建了一个名为count的响应式引用，并使用watch函数来监听其变化。每当count的值发生变化时，都会执行回调函数，并在控制台中打印新的值。三、监听多个数据源

watch也可以用来使用同时监听多个数据源。以下是一个同时监听两个ref的例子：import { ref， watch } from 'vue'；export default { setup() { const count = ref(0)； const name = ref('张三')； //同时监听count和name的变化 watch([count， name ]， ([newCount， newName]， [oldCount， oldName]) =gt； { console.log(`计数从 ${oldCount} 等于 ${newCount}`)； console.log(`名字从 ${oldName}价值${newName}`)； })； return { count， name }； }}；lt；/scriptgt；

在这个例子中，我们同时监听了count和name的变化。数据中的一个发生变化的时候，都会执行回调函数，并在控制台中打印新的值。

四、监听对象属性

除了监听基本数据类型外，watch还可以用于监听对象属性的变化。以下是一个监听对象属性变化的例子：import {reactive，watch } from 'vue' ；export default { setup() { const person =reactive({firstName： '张'，lastName：'三' })； // 监听改变person对象中firstName属性的watch(() =gt； person.firstName， (新值，旧值） =gt； { console.log(`名字从 ${oldValue} 等于 ${newValue}`)； })； return { person }； }}；lt；/scriptgt；

在这个例子中中，我们创建了一个名为person的响应式对象，并使用watch函数来监听其firstName属性的变化。五、watchEffect

除了watch之外，Vue 3还提供了watchEffect函数，它可以自动收集依赖并在依赖发生变化时执行回调函数。以下是一个watchEffect的例子：import { ref， watchEffect } from 'vue'；export default { setup() { const count = ref(0)； // 自动收集count的依赖并在变化时执行回调 watchEffect(() =gt； { console.log(`计数为：${count.value}`)； })； return { count }； }}；lt；/scriptgt；

在这个例子中，watchEffect会自动收集count的依赖，并在count变化时执行回调函数。六、总结

Vue 3的watch函数是一个强大的工具，它可以用来监听响应方式数据的变化，并在变化时执行相应的回调函数。通过本文的介绍，你应该已经对Vue有了了解3的手表用法有了深入的了解。在实际开发中，合理使用手表可以帮助您更方便地管理和更新数据。