Vue 计算合成 API

Vue 计算合成 API (Composition API) 是在 Vue 3.0 中引入的一种新的 API，它提供了一种新的方式来组织和重用组件逻辑。它不同于 Vue 2.x 中的 Options API，它是基于函数的，并且可以在不同的组件之间共享逻辑。

Vue 2.x 中 Options API 的限制

在 Vue 2.x 中，Options API 是非常灵活的，它允许将组件的状态和行为定义在一个对象里。但是，这种方式存在一些限制：

1. 逻辑不够清晰。 当组件变得非常复杂时，Options API 的代码可能会变得非常冗长和难以理解。
2. 代码复用不够方便。 Options API 规定了组件必须按照一定的顺序声明，并且它不适合在不同组件之间重复使用逻辑。

Vue 3.0 中的 Composition API

为了解决上述问题，Vue 3.0 中引入了 Composition API。它提供了一种基于函数的方式来组织逻辑，让开发者更加灵活地组织代码，并且在组件之间可以更好地复用逻辑。

Composition API 的核心是 setup 函数，它是组件实例创建之前调用的一个函数。在 setup 函数中，我们可以调用 Vue 3 中提供的各种 API 来创建响应式数据、计算属性、方法等。

如何使用 Composition API

引入

在使用 Composition API 之前，需要先引入 vue 和 @vue/runtime-core，并修改模板中的 defineComponent：

import { defineComponent } from "vue";
import { reactive, ref, computed, ... } from "@vue/runtime-core";

export default defineComponent({
  setup() {
    ...
  }
});

创建响应式对象

在 Composition API 中，可以使用 reactive 和 ref 来创建响应式对象。reactive 创建的对象可以直接修改属性的值，并且会自动触发更新；ref 则创建的是一个容器，通过 .value 来访问和修改里面的值。

import { reactive, ref } from "@vue/runtime-core";

export default defineComponent({
  setup() {
    // 创建响应式对象
    const state = reactive({
      count: 0,
      name: "张三"
    });

    // 创建 ref 容器
    const message = ref("Hello, World!");

    return {
      state,
      message
    };
  }
});

创建计算属性

在 Vue 3 中，计算属性可以使用 computed 函数来创建，并且只有在依赖的数据发生变化时才会重新计算。

import { reactive, computed } from "@vue/runtime-core";

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0,
      name: "张三"
    });

    // 创建一个计算属性
    const message = computed(() => {
      return `Hello, ${state.name}!`;
    });

    return {
      state,
      message
    };
  }
});

创建方法

在 Composition API 中，可以直接在 setup 函数中创建方法，并且可以直接使用响应式对象。

import { reactive } from "@vue/runtime-core";

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0
    });

    // 创建一个方法
    const increment = () => {
      state.count += 1;
    };

    return {
      state,
      increment
    };
  }
});

生命周期钩子

在 Composition API 中，生命周期钩子也可以使用函数来定义。例如，可以在 setup 函数中使用 onMounted 函数来注册 mounted 钩子。

import { reactive, onMounted } from "@vue/runtime-core";

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0
    });

    // 注册 mounted 钩子
    onMounted(() => {
      console.log("mounted");
    });

    return {
      state
    };
  }
});

总结

Vue 3 中的 Composition API 提供了一种新的方式来组织和重用组件逻辑，它不同于 Vue 2 中的 Options API，它是基于函数的，并且可以在不同的组件之间共享逻辑。使用 Composition API 可以让开发者更加灵活地组织代码，并且在组件之间可以更好地复用逻辑。