Vue3 Composition API：响应式与生命周期

Vue 3 的 Composition API 是一种新的组件逻辑组织方式，它通过函数式 API 提供更灵活、可复用的代码结构。核心优势包括更好的逻辑封装、类型推断支持（如 TypeScript）和更清晰的代码组织。下面我将逐步解释响应式系统和生命周期钩子在 Composition API 中的实现和使用。

1. 响应式系统

在 Vue 3 中，响应式是数据驱动 UI 的核心机制。Composition API 使用 ref 和 reactive 函数创建响应式数据：

• ref：用于基本类型（如数字、字符串），返回一个响应式引用对象。访问时需使用 .value。
• reactive：用于对象或数组，返回一个响应式代理对象。直接访问属性即可。

响应式原理基于 Proxy API，当数据变化时自动触发视图更新。下面是一个简单示例：

import { ref, reactive } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式基本类型
    const count = ref(0);
    
    // 使用 reactive 创建响应式对象
    const user = reactive({
      name: '张三',
      age: 25
    });

    // 修改数据：ref 需用 .value，reactive 直接赋值
    function increment() {
      count.value++;
      user.age++;
    }

    return { count, user, increment };
  }
};

在这个例子中：

• count 是一个响应式引用，初始值为 0。修改时需调用 count.value。
• user 是一个响应式对象，属性变化会自动更新 UI。
• 响应式数据可结合计算属性（computed）或侦听器（watch）实现更复杂逻辑。

2. 生命周期钩子

Composition API 将传统 Options API 的生命周期钩子（如 mounted、updated）转换为函数形式，需从 vue 导入。常用钩子包括：

• onMounted：组件挂载完成后调用，适合初始化 DOM 操作或异步请求。
• onUpdated：组件更新后调用，用于响应数据变化。
• onUnmounted：组件卸载前调用，用于清理资源（如定时器或事件监听器）。
• 其他钩子：如 onBeforeMount、onBeforeUpdate 等，用法类似。

生命周期钩子必须在 setup 函数中调用，并支持异步操作。示例代码如下：

import { onMounted, onUnmounted, ref } from 'vue';

export default {
  setup() {
    const timer = ref(null);
    const seconds = ref(0);

    // 组件挂载时启动计时器
    onMounted(() => {
      timer.value = setInterval(() => {
        seconds.value++;
      }, 1000);
    });

    // 组件卸载前清除计时器
    onUnmounted(() => {
      if (timer.value) clearInterval(timer.value);
    });

    return { seconds };
  }
};

在这个例子中：

• onMounted 用于启动一个每秒递增的计时器。
• onUnmounted 确保组件销毁时清除计时器，避免内存泄漏。
• 钩子函数按顺序执行，但可多次调用以组织不同逻辑块。

3. 响应式与生命周期的结合使用

在实际开发中，响应式数据常与生命周期钩子协同工作。例如，在 onMounted 中初始化数据，并在 onUnmounted 中清理：

import { onMounted, onUnmounted, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      data: null,
      error: null
    });

    // 挂载时获取数据
    onMounted(async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        state.data = await response.json();
      } catch (err) {
        state.error = err.message;
      }
    });

    // 卸载时重置状态
    onUnmounted(() => {
      state.data = null;
      state.error = null;
    });

    return { state };
  }
};

关键点总结：

• 响应式优先：使用 ref 或 reactive 管理数据状态，确保 UI 自动更新。
• 生命周期管理：钩子函数（如 onMounted）帮助控制组件的“生老病死”，避免副作用。
• 最佳实践：在 setup 函数中定义所有逻辑，保持代码可读性和可测试性；避免在钩子外直接操作 DOM。

通过 Composition API，Vue 3 实现了更现代化的开发模式。如果您有具体场景（如异步请求或状态管理），我可以进一步提供代码示例或优化建议！