Vue3中如何检测数组的变化

最新推荐文章于 2025-10-17 16:58:10 发布

原创最新推荐文章于 2025-10-17 16:58:10 发布 · 4.4k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

watch和watchEffect

1. watch
2. watchEffect
3. 区别

Vue 3中，watch和watchEffect函数是用于监听数据变化的功能。

1. watch

watch函数是一个选项，可以在组件的选项中使用。
它接收两个参数：要监听的数据表达式或计算属性，以及回调函数。
当监听的数据发生变化时，回调函数会被触发执行。
回调函数接收两个参数：新值（变化后的值）和旧值（变化前的值）。
可以使用watch函数来监听简单的数据变化，以及需要精确控制监听行为的情况。
watch函数还支持配置选项，如deep用于深度监听对象或数组的变化，immediate用于在初始化时立即执行回调函数等。
示例代码：

import { watch } from 'vue';

watch(
  () => myArray, // 监听的数组
  (newArray, oldArray) => {
    // 数组发生变化时的回调函数
    console.log('数组变化了', newArray, oldArray);
  }
);

在上面的代码中，我们使用watch函数来监听myArray数组的变化。当数组发生变化时，回调函数将被执行。

2. watchEffect

watchEffect函数是一个响应式副作用函数，可以在组件的代码块中使用。
它接收一个函数作为参数，该函数内部可以使用响应式数据。
当响应式数据变化时，函数会被自动触发执行。
watchEffect函数会自动追踪函数内部使用的响应式数据，并在其变化时重新执行函数。
这意味着你无需显式指定要监听的数据，而是让Vue自动追踪依赖关系。
watchEffect函数适用于需要自动追踪多个响应式数据变化的情况，以及需要处理副作用操作的场景。
示例代码：

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log('数组变化了', myArray);
});

在上面的代码中，我们使用watchEffect函数来监听myArray数组的变化。一旦数组发生变化，回调函数将被执行。

3. 区别

3.1 监听的方式：

watch选项：watch选项需要在组件的选项中定义，并接收两个参数：要监听的数据表达式和回调函数。它可以监听指定的数据或计算属性，并在其变化时执行回调函数。
watchEffect函数：watchEffect函数可以在组件的代码块中直接使用，并接收一个函数作为参数。它会自动追踪函数内部使用的响应式数据，并在其变化时执行函数。

3.2 追踪依赖：

watch选项：watch选项需要明确指定要监听的数据表达式，只有该表达式变化时才会触发回调函数。如果需要监听多个数据，可以使用包含这些数据的计算属性。
watchEffect函数：watchEffect函数会自动追踪函数内部使用的响应式数据，并在任何这些数据变化时触发函数。它会自动收集依赖，并在依赖发生变化时重新运行函数。