Vue 3 响应式核心：认识副作用函数

在 Vue 3 的响应式系统中，副作用函数（Effect） 是指那些访问响应式数据（如 ref、reactive 等）并在数据变化时自动重新执行的函数。

1. 组件的渲染函数（Render Function）

• 作用：生成组件的虚拟 DOM。
• 触发条件：当组件依赖的响应式数据变化时，渲染函数重新执行，触发视图更新。
• 示例：

  <template>
    <div>{{ count }}</div>
  </template>
  <script setup>
  import { ref } from 'vue';
  const count = ref(0); // 响应式数据
  </script>
  

  count 变化时，组件的渲染函数会重新执行。

2. watchEffect

• 作用：立即执行传入的函数，并自动追踪其依赖的响应式数据，依赖变化时重新执行。
• 特点：无需显式声明依赖。
• 示例：

  import { watchEffect, ref } from 'vue';
  const count = ref(0);
  
  watchEffect(() => {
    console.log('Count changed:', count.value); // 自动追踪 count.value
  });
  

3. watch

• 作用：侦听特定响应式数据源，变化时执行回调函数。
• 特点：需显式声明侦听源。
• 示例：

  import { watch, ref } from 'vue';
  const count = ref(0);
  
  watch(count, (newVal) => {
    console.log('Count updated:', newVal);
  });
  

4. 计算属性（computed）

• 作用：基于响应式数据派生新值，并缓存结果。
• 触发条件：依赖的响应式数据变化时，重新计算值。
• 示例：

  import { computed, ref } from 'vue';
  const count = ref(0);
  const doubled = computed(() => count.value * 2); // 依赖 count.value
  

5. 自定义 effect（通过 effect API）

• 作用：Vue 响应式系统的底层 API，用于手动创建副作用函数。
• 使用场景：库作者或高级用户，一般不直接用于业务代码。
• 示例：

  import { effect, reactive } from 'vue';
  const state = reactive({ count: 0 });
  
  effect(() => {
    console.log('Effect triggered:', state.count);
  });
  

总结

这些副作用函数是 Vue 3 响应式系统的核心，通过自动依赖追踪和重新执行，实现了数据到视图的精确更新。