Vue3 组合式 API 详解

概述

组合式 API 是 Vue3 最重要的新特性，它解决了 Vue2 中选项式 API 的一些问题。简单来说，它让你可以把相关的逻辑代码放在一起，而不是分散在不同的选项中。

与选项式 API 的对比

setup 函数

setup 函数是组合式 API 的入口点，它在组件实例创建之前执行。在这个函数中，你可以定义响应式数据、计算属性、方法等，然后返回给模板使用。

基本用法

1. 响应式数据

import { ref, reactive } from "vue";

export default {
  setup() {
    // 基本类型使用 ref
    const count = ref(0);
    const message = ref("Hello");

    // 对象使用 reactive
    const user = reactive({
      name: "张三",
      age: 25,
    });

    return {
      count,
      message,
      user,
    };
  },
};

2. 计算属性

import { computed } from "vue";

export default {
  setup() {
    const count = ref(0);

    // 计算属性
    const doubleCount = computed(() => count.value * 2);
    const isEven = computed(() => count.value % 2 === 0);

    return {
      count,
      doubleCount,
      isEven,
    };
  },
};

3. 方法定义

export default {
  setup() {
    const count = ref(0);

    // 方法
    const increment = () => {
      count.value++;
    };

    const decrement = () => {
      count.value--;
    };

    return {
      count,
      increment,
      decrement,
    };
  },
};

4. 生命周期钩子

import { onMounted, onUnmounted } from "vue";

export default {
  setup() {
    // 生命周期钩子
    onMounted(() => {
      console.log("组件已挂载");
    });

    onUnmounted(() => {
      console.log("组件即将卸载");
    });

    return {};
  },
};

组合式函数 (Composables)

组合式函数是组合式 API 的核心概念，它让你可以提取和复用有状态的逻辑。

1. 创建组合式函数

// useCounter.js
import { ref, computed } from "vue";

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  const doubleCount = computed(() => count.value * 2);

  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => (count.value = initialValue);

  return {
    count,
    doubleCount,
    increment,
    decrement,
    reset,
  };
}

2. 使用组合式函数

import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, doubleCount, increment, decrement } = useCounter(10);

    return {
      count,
      doubleCount,
      increment,
      decrement,
    };
  },
};

3. 异步组合式函数

// useAsyncData.js
import { ref, onMounted } from "vue";

export function useAsyncData(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetchData = async () => {
    loading.value = true;
    error.value = null;

    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  onMounted(fetchData);

  return {
    data,
    loading,
    error,
    refetch: fetchData,
  };
}

优势

1. 逻辑复用

可以将相关的逻辑提取到独立的函数中
多个组件可以共享同一个逻辑
更容易测试和维护

2. 类型推导

更好的 TypeScript 支持
更准确的类型推断
减少类型错误

3. 逻辑组织

相关的代码放在一起
更容易理解组件的功能
更好的代码可读性

4. 性能优化

更好的 Tree-shaking 支持
减少不必要的代码打包
更小的包体积

最佳实践

1. 命名规范

组合式函数以 use 开头
变量和方法使用有意义的名称
保持一致的命名风格

2. 返回值处理

export default {
  setup() {
    // 只返回模板需要的数据
    const internalData = ref("internal");
    const publicData = ref("public");

    return {
      publicData, // 只返回 publicData
    };
  },
};

3. 响应式数据管理

export default {
  setup() {
    // 将相关的数据组织在一起
    const user = reactive({
      name: "",
      email: "",
      avatar: "",
    });

    const userActions = {
      updateName: (name) => (user.name = name),
      updateEmail: (email) => (user.email = email),
    };

    return {
      user,
      ...userActions,
    };
  },
};

总结

组合式 API 为 Vue3 带来了更灵活、更强大的开发体验。通过合理使用组合式函数，你可以构建出更易维护、更易复用的 Vue 应用。