Vue 3 的组合式 API 入门指南

基础概念

组合式 API 是 Vue.js 3 中引入的一组新的 API，它们允许开发者以一种更灵活和组织化的方式来构建组件的逻辑。这个 API 集合的核心是允许开发者将组件的功能划分为可重用的代码片段，即"组合(composables)"。这些组合可以包含任何响应式数据或函数，并且可以在不同的组件之间共享和复用。

组合式 API 的出现，主要是为了解决 Vue 2 中选项式 API 的几个限制，特别是在处理大型组件或需要跨组件共享状态逻辑时的复杂性。在选项式 API 中，组件的代码是根据功能选项（如 data, methods, computed 等）组织的，这可能导致与同一功能相关的代码分散在不同的位置。而组合式 API 通过 setup 函数提供了一个统一的组织方式，使得相关的逻辑可以聚集在一起，从而提高代码的可维护性和可读性。

下面是一个简单的例子说明组合式 API 的用法：

import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup(props, context) {
    // 响应式状态
    const count = ref(0);

    // 计算属性
    const doubled = computed(() => count.value * 2);

    // 观察响应式状态的变化
    watch(count, (newValue, oldValue) => {
      console.log(`count变化了，新值为：${newValue}`);
    });

    // 生命周期钩子
    onMounted(() => {
      console.log('组件挂载完成');
    });

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

    // 返回值将暴露给模板
    return { count, doubled, increment };
  }
};

在这个组件中，我们使用 ref 创建了一个响应式的数据 count，使用 computed 创建了一个基于 count 的计算属性 doubled，使用 watch 来观察 count 的变化，并在组件挂载后通过 onMounted 钩子打印一条消息。所有这些逻辑都被包含在 setup 函数中，并且通过返回一个对象使得它们能够在组件的模板中使用。

通过组合式 API，开发者可以轻松地抽离和重构代码，创建可复用的逻辑单元，并在不同的组件之间共享这些逻辑，从而使得代码更加清晰和模块化。

setup 函数

setup 函数是组合式 API 的入口点，它是组件生命周期中最先执行的函数。在这里，你可以定义响应式的数据、计算属性、方法和生命周期钩子。

import { ref, onMounted } from 'vue';

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

    onMounted(() => {
      console.log('组件挂载完成！');
    });

    return { count };
  }
};

在上面的例子中，count 是一个响应式的引用，onMounted 是一个生命周期钩子，它们都在 setup 函数中定义。

响应式引用 ref

ref 用于定义一个响应式的引用，它包装一个内部值并返回一个响应式且可变的对象。

const count = ref(0);

当你修改 count.value 时，任何依赖 count 的视图都会自动更新。

响应式对象 reactive

与 ref 类似，reactive 用于创建一个响应式的对象。

const state = reactive({ count: 0 });

这里，state 是一个响应式的对象，你可以直接修改它的属性，如 state.count，来触发视图更新。

计算属性和侦听器 computed 和 watch

计算属性允许你定义基于响应式状态的派生值，而侦听器让你能够响应状态的变化执行副作用。

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

watch(doubledCount, (newValue) => {
  console.log(`count 的两倍是 ${newValue}`);
});

深入探索

生命周期钩子

在组合式 API 中，你可以直接在 setup 函数中使用生命周期钩子，而不是作为组件选项。

onMounted(() => {
  console.log('组件挂载完成！');
});

组合函数

组合函数是一种复用逻辑的强大方式。你可以把组件逻辑抽象成一个函数，然后在多个组件中使用它。

function useCounter() {
  const count = ref(0);
  const increment = () => { count.value++; };
  return { count, increment };
}

现在，任何组件都可以通过调用 useCounter 来获得计数器的功能。

最佳实践

逻辑抽象和复用

在 Vue 3 中，组合式 API 提供了一种新的方式来组织和复用逻辑：将相关的响应式状态、计算属性、函数和钩子封装到一个可重用的函数中。这种模式被称为"逻辑抽象"。

例如，假设你有一个计数器的逻辑，你可能会在多个组件中用到相同的增加和减少逻辑。而不是在每个组件中重复这些逻辑，你可以创建一个 useCounter 组合函数：

// useCounter.js
import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  const increment = () => { count.value++; };
  const decrement = () => { count.value--; };

  return { count, increment, decrement };
}

然后，在任何组件中，你可以这样使用这个组合函数：

import { useCounter } from './useCounter';

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

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

这种抽象方式不仅使得逻辑更容易在多个组件间共享，而且还使得单元测试变得更加容易。你可以直接测试 useCounter 函数，而不必担心组件的其他部分。

TypeScript 集成

Vue 3 在设计时就考虑了与 TypeScript 的集成，使得开发者可以享受到强类型语言带来的好处。TypeScript 提供了类型推断、类型检查和更好的编辑器支持，这些特性对于开发大型应用来说非常有价值。

组合式 API 与 TypeScript 的集成非常自然。例如，当你使用 ref 或 reactive 定义响应式状态时，TypeScript 可以自动推断状态的类型：

import { ref } from 'vue';

const count = ref(0); // `count` 自动被推断为 `Ref<number>`

如果你想更明确地定义类型，你也可以在 ref 或函数返回值中指定它：

import { Ref, ref } from 'vue';

const count: Ref<number> = ref(0);

function useCounter(): { count: Ref<number>; increment: () => void } {
  const count = ref(0);
  const increment = () => { count.value++; };

  return { count, increment };
}

这种类型安全性在开发过程中非常有用，因为它可以在编译时捕获潜在的错误，而不是在运行时。此外，它也提供了更好的开发体验，因为编辑器可以提供更准确的自动完成和代码提示。

总的来说，通过抽象逻辑到可复用的组合函数和利用 TypeScript 的强类型特性，Vue 3 的组合式 API 不仅提高了代码的组织性和可维护性，还极大地增强了开发效率和代码质量。

结论

Vue 3 的组合式 API 是一个强大的新特性，它为构建复杂且可维护的应用程序提供了更多的灵活性和表达力。通过理解其核心概念并结合实际项目中的应用，你可以充分利用组合式 API 带来的好处。