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函数没有返回值，且无法手动停止追踪和清理。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
