组合模式

Options API

在 Vue 中引入组合式 API 之前，开发人员依靠选项式 API 来组织组件逻辑，包括响应式数据、生命周期方法、计算属性等。Options API 允许在特定选项中定义这些方面，如下例所示：

<!-- Template -->

<script>
  export default {
    name: "MyComponent",
    props: {
      // props
    },
    data() {
      // data
    },
    computed: {
      // computed properties
    },
    watch: {
      // properties to watch
    },
    methods: {
      // methods
    },
    created() {
      // lifecyle methods like created
    },
    // ...
  };
</script>

<!-- Styles -->

Composition API

组合式 API 可以看作是一个提供代表 Vue 核心能力的独立函数的 API。这些函数主要在单个 setup（） 选项中使用，该选项用作使用组合式 API 的入口点。

Composables

采用组合式 API 的一个巨大好处是能够提取和重用组件之间的共享逻辑。这是由这样一个事实驱动的，即我们可以简单地声明自己的函数，这些函数使用 Vue 的全局可用的组合函数，并让我们的函数很容易在多个组件中使用以实现相同的结果。

import { ref } from "vue";

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

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  return {
    count,
    increment,
    decrement,
  };
}

借助可组合函数，我们可以灵活地跨组件提取和重用共享逻辑。这种关注点分离使我们能够专注于每个可组合函数中的特定功能，使我们的代码更加模块化和可维护。