watchEffect
- 特点:
watchEffect
是一个立即执行的函数,它会追踪其内部使用的所有响应式数据,并在这些数据变化时重新执行。- 它不需要明确地指定要监听的数据,而是通过自动追踪函数内使用的响应式数据来确定依赖关系。
- 适用于在组件渲染期间自动追踪并响应式更新的场景。
- 示例:
<script setup>
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => { console.log(count.value); });
</script>
在实际项目开发中遇到的问题,比如下边这个例子。
watchEffect中不论num如何改变tableData.size都不变,也就是说watchEffect中的依赖改变并没有重新执行。
import { ref, watchEffect } from 'vue';
const num = ref(400);
watchEffect(async () => {
const response = await fetchDataList();
tableData.size = num.value;
});
总结问题原因:watchEffect 只能收集同步代码的依赖,watchEffect 中只有await前的fetchDataList()是同步,执行完毕后剩下的就会放入微队列(await 后的代码相当于promise的then,这是事件循环的知识)并没有执行,watchEffect收集不到了。
watch
- 特点:
watch
允许你显式地指定要监听的数据,并在指定的数据变化时执行回调函数。- 可以用于处理特定数据的变化,而不是追踪函数内的所有响应式数据。
- 支持配置项,如
immediate
用于在监听开始时立即执行回调,以及deep
用于深度监听对象。
- 示例:
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>
选择使用场景
- 如果想要在组件渲染时自动追踪和响应式更新依赖关系,通常可以使用
watchEffect
。 - 如果需要对特定的数据进行监听,并在数据变化时执行回调函数,可以使用
watch
。 - 在实际开发中,
watchEffect
通常用于处理副作用,而watch
用于处理特定数据的变化。