Vue3中如何检测数组的变化方式

watch和watchEffect

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函数会自动追踪函数内部使用的响应式数据，并在任何这些数据变化时触发函数。它会自动收集依赖，并在依赖发生变化时重新运行函数。

3.3 调用时机

• watch选项：watch选项在初始化时会立即执行一次回调函数，并在监听的数据发生变化时再次执行回调函数。
• watchEffect函数：watchEffect函数在组件渲染时会立即执行一次函数，并在其内部使用的响应式数据发生变化时再次执行函数。

3.4 返回值

• watch选项：watch选项的回调函数可以返回一个清理函数，用于在不需要监听时进行清理操作。
• watchEffect函数：watchEffect函数没有返回值，且无法手动停止追踪和清理。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。