【vue3|第9期】Vue3中watch监视的深度解读

日期：2024年6月10日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

在 Vue3 中，watch 是一个重要的特性，它允许我们监视数据的变化，并在数据发生变化时执行特定的操作。本文将深入探讨 Vue3 中的watch特性，包括如何设置监视，可以监视哪些数据，以及适用场景。

二、什么是 watch？

简单来说，watch 允许我们密切观察特定数据的变化，并在数据发生变化时执行相应的操作或逻辑。

1、watch 基本语法

watch(source, callback, options)

其中，

• source 表示要监视的数据，可以是一个响应式数据对象、一个计算属性、一个方法的返回值或包含上述内容的数组；
• callback 表示当数据发生变化时要执行的回调函数；
• options 是一个可选的配置对象，用于指定一些选项，如 immediate 、deep 、flush 等。

2、取消 watch 监视

在某些情况下，我们可能需要停止对某个watch的监视。Vue 3提供了unwatch函数来取消监视。

const unwatch = watch(source, callback, options)

// 当需要停止监视时调用 unwatch()
unwatch();

三、Watch 监视的工作原理

在 Vue3 中，watch 监视的工作原理基于 Vue 的响应式系统。当我们使用 watch 来监视某个数据或计算属性时，Vue 会追踪这个数据或计算属性的依赖关系，并在它们发生变化时触发相应的回调函数。这个过程包括两个主要步骤：

• 依赖收集
  当我们在组件中声明一个 watch 时，Vue 会分析该 watch 所依赖的数据或计算属性，并将它们标记为需要被监视的依赖项。
• 依赖通知
  当被监视的依赖项发生变化时，Vue 会触发相应的 watch 回调函数，并将变化后的新值和旧值作为参数传递给该函数。这样，我们就可以在回调函数中执行自定义的逻辑来处理这些变化。

四、Watch 中可选配置对象

immediate、deep 和 flush 是 Vue3 中 watch 函数的可选配置选项，用于控制监视的行为。

• immediate：如果设置为 true，则在组件挂载时立即执行回调函数，而不是在数据变化时才执行。这对于在组件挂载时需要进行一些初始化操作非常有用。
• deep：如果设置为 true，则会递归地监视对象的所有属性，包括嵌套对象的属性。如果对象的属性发生变化，回调函数将被触发。如果不设置 deep，则只会监视对象的顶层属性。
• flush：用于控制回调函数的执行时机。它可以设置为 'pre'（在组件更新之前执行）、'post'（在组件更新之后执行）或 'sync'（在数据变化时立即执行，与 immediate 类似，但会在组件更新之前执行）。

以下示例展示了如何使用这些选项：

import { reactive, watch } from 'vue';

const state = reactive({
  count: 0,
  obj: {
    name: 'John',
    age: 30
  }
});

// 立即执行回调函数
watch(state, (newValue, oldValue) => {
  console.log('State has changed:', newValue);
}, { immediate: true });

// 深度监视对象的所有属性
watch(state.obj, (newValue, oldValue) => {
  console.log('Object has changed:', newValue);
}, { deep: true });

// 在组件更新之前执行回调函数
watch(state, (newValue, oldValue) => {
  console.log('State has changed:', newValue);
}, { flush: 'pre' });

在上述示例中，我们使用 watch 函数监视了 state 对象和 state.obj 对象的变化。通过设置 immediate: true，我们在组件挂载时立即执行了回调函数。通过设置 deep: true，我们递归地监视了 state.obj 对象的所有属性。通过设置 flush: 'pre'，我们在组件更新之前执行了回调函数。

五、Vue 3中 Watch可监视的数据类型

Vue3 中的 watch 可以监视多种数据类型的变化，包括：

1、ref定义的数据

ref 是 Vue3中用于定义响应式数据的一种方式。我们可以使用 watch 来监视 ref 定义的基本类型数据或对象类型数据的变化。

<template>
  <div>{{count}}</div>
</template>

<script setup>
import { ref, watch } from 'vue';

// ref定义的数据
const count = ref(0);

// 监视 count 
watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});
</script>

2、reactive定义的数据

reactive 是 Vue3 中用于定义响应式对象的一种方式。与 ref 类似，我们也可以使用 watch 来监视reactive 定义的对象的变化。

<template>  
  <input v-model="person.name" placeholder="Name">  
  <input v-model.number="person.age" type="number" placeholder="Age">  
  <p>Person: {{ person.name }}, {{ person.age }} years old</p>  
</template>  
  
<script setup>  
import { reactive, watch } from 'vue';  
  
const person = reactive({  
  name: 'Commas',  
  age: 18,  
});  
  
watch(person, (newValue, oldValue) => {  
  // 注意：当监视 reactive 对象时，newValue 和 oldValue 是相同的，因为它们指向同一个对象  
  // 如果需要深度比较，你可能需要使用 deep 选项（但 Vue 3 默认是浅比较的）  
  // 或者你可以考虑使用 toRaw 和一个 deep clone 库  
  console.log('Person has changed:', newValue);  
}, { deep: true }); // 注意：对于 reactive 对象，通常需要设置 deep: true  
</script>

3、函数返回的值（getter函数）

在 Vue3 中，我们还可以使用 watch 来监视一个函数的返回值的变化。这通常用于监视计算属性的变化。

<template>  
  <input v-model="firstName" placeholder="First name">  
  <input v-model="lastName" placeholder="Last name">  
</template>  

<script setup>  
import { ref, watch } from 'vue';  
  
const firstName = ref('Commas');  
const lastName = ref('KM');  
  
watch(  
  () => firstName.value + ' ' + lastName.value, // 使用 getter 函数  
  (newValue, oldValue) => {  
    console.log('Full name has changed:', newValue);  
  }  
);  
</script>

4、包含上述内容的数组

watch 还支持同时监视多个数据的变化。我们可以将一个包含多个要监视的数据的数组作为 watch 的第一个参数，然后在回调函数中处理这些数据的变化。

<template>  
  <input v-model="firstName" placeholder="First name">  
  <input v-model="lastName" placeholder="Last name">  
</template>  
  
<script setup>  
import { ref, watch } from 'vue';  
  
const firstName = ref('Commas');  
const lastName = ref('KM');  
  
watch([firstName, lastName], (newValues, oldValues) => {  
  console.log('Names have changed:', newValues, oldValues);  
});  
</script>

六、watch 的适用场景

Vue3 中的 watch 具有广泛的应用场景，包括但不限于以下几种情况：

• 监听表单的变化：在表单应用中，我们经常需要监听表单字段的变化来执行一些操作，如验证输入、更新数据等。这时，我们可以使用 watch 来监视表单字段的变化，并在变化时执行相应的逻辑。
• 监听路由参数的变化：在 Vue Router 中，我们可以使用 watch 来监视路由参数的变化，以便在路由变化时执行一些操作，如加载数据、更新UI等。
• 监听Vuex中的数据变化：Vuex 是 Vue 的一个状态管理模式和库。在 Vuex 中，我们可以使用 watch 来监视状态的变化，并在变化时触发相应的操作，如更新 UI、发送请求等。
• 监听复杂计算属性的变化：当我们的组件中包含复杂的计算属性时，我们可以使用watch来监视这些计算属性的变化，以便在它们变化时执行一些操作，如重新渲染视图、更新其他数据等。

七、总结

Vue3 中的 watch 是一个功能强大的工具，它允许我们监视 Vue 实例中的数据变化并执行相应的操作。通过深入理解 watch 的工作原理、可监视的数据类型以及适用场景，我们可以更好地利用这一功能来构建高效、可维护的Vue应用。

---

参考文章：

• Vue.js

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139623853