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 用于处理特定数据的变化。