Vue 组合 API

Vue 组合 API 是 Vue 3 中引入的一种新的组件复用模式，它允许开发者通过函数而不是选项来组织组件代码。组合 API 的目的是解决混入和全局状态共享等问题，并使组件更易于理解、维护和测试。

使用组合 API 的优势：

• 逻辑复用：可以将一组关联逻辑封装在一个函数中，不再需要依赖混入。

• 组件复杂性管理：将组件拆分为更小的、功能单一的逻辑单元，使得组件更易于理解和维护。

• 代码组织：组合 API 允许根据功能而不是选项来组织代码，使得相关的代码更加紧凑和易于查找。

组合 API 的基本使用：

1、创建一个组合函数

import { reactive } from 'vue';
export function useCounter(initialCount) {
  const state = reactive({
    count: initialCount,
  });
  function increment() {
    state.count++;
  }
  function decrement() {
    state.count--;
  }
  return {
    state,
    increment,
    decrement,
  };
}

2、在组件中使用组合函数

<template>
  <div>
    <p>Count: {{ counter.state.count }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>
<script>
import { useCounter } from './useCounter';
export default {
  setup() {
    const counter = useCounter(0);
    return {
      counter,
    };
  },
};
</script>

关键概念和注意事项：

reactive: 在组合函数中可以使用 reactive 来创建响应式对象，类似于 Vue 2.x 中的 data。

ref: 用于创建单个响应式值，如果只需管理单个状态变量，可以使用 ref。

computed: 可以通过 computed 创建计算属性。

watch: 用于监视响应式状态的变化。

生命周期钩子: 在 setup 函数中使用 onMounted、onUpdated、onUnmounted 等来替代 Vue 2.x 中的生命周期钩子。

组合 API 的引入使得 Vue 组件在组织逻辑和复用性方面更加灵活和强大，是 Vue 3 中一个重要的进步。