watch和watchEffect的区别
一、基本特点：
watch:
- 目的：用于观察一个或多个响应式数据的变化，并在变化时执行回调。
- 手动指定：需要明确指定要观察的源数据。
- 回调参数：提供新值和旧值的对比，可以在回调中使用。
watchEffect:
- 目的：用于自动追踪函数内部引用的所有响应式数据，任何被引用的数据变化都会导致该函数重新执行。
- 自动追踪：不需要手动指定要观察的变量，函数内部的所有响应式数据都被自动追踪。
- 无参数：回调函数没有旧值和新值的参数，通常用于副作用处理。
二、使用方式(方便大家参考使用)：
import { ref, watch } from 'vue';
const count = ref(0);
//----------------watch:------------------
//1、监听单个数据
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
//2、getter函数
watch(() => x.value + y.value,(sum) => {
console.log(`sum of x+y is: ${sum}`)
})
//3、多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${newX} and y is ${newY}`)
})
//----------------watchEffect:--------------
watchEffect(() => {
console.log(`Count is: ${count.value}`);
});
// 修改 count
count.value++; // 输出: Count changed from 0 to 1三、深层侦听器
深层监听的有无主要区别在于如何处理嵌套对象或数组的变化。
watch:
1、传入一个响应式对象，会隐式创建一个深层侦听器——该回调函数在所有嵌套的属性变更时都会触发（有深层监听）：
const obj = reactive({ count: 0 })
watch(obj, (newValue, oldValue) => {
// 在嵌套的属性（例：count）变更时触发
// 注意：`newValue` 此处和 `oldValue` 是相等的
// 因为它们是同一个对象！
})
obj.count++2、传入一个返回响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调（无深层监听）：
watch(
() => state.someObject,
() => {
// 仅当 state.someObject 被替换时触发
}
注：{ deep: true }//但如果加上deep选项，就会强制转成深层侦听器
)watchEffect：
- 在内部函数中直接访问嵌套属性，Vue 会自动追踪所有依赖。
- 不需要显式的深层监听配置，任何嵌套属性变化都会自动触发回调。
四、即刻回调的侦听器
即刻回调：是指当设置了监听器后，回调函数将在监视生效的同时立即执行。不即刻回调意味着回调函数不会在监听器设置后立即执行，而是等待被观察的响应式数据发生变化时才会执行。
watch:
通过选项 { immediate: true } 来实现即刻回调
import { ref, watch } from 'vue';
const count = ref(0);
// 使用 immediate 选项实现即刻回调
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}, { immediate: true });
// 修改 count
count.value++; // 触发回调watchEffect：
- 默认行为是立即执行内部的回调函数。
- 自动追踪所有响应式依赖，因此在组件初始化时就会执行一次。
五、参考文档
如果想要了解更多关于侦听器的知识，例如：一次性侦听器、停止侦听器等等，可以去官网进行更加详细全面的学习，链接：侦听器 | Vue.js (vuejs.org)
原文地址：https://blog.csdn.net/m0_75074819/article/details/142894150
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！