随着 Vue 3 的发布，组合式 API（Composition API）成为了 Vue 框架中的一个重要特性。与 Vue 2 中的选项式 API 不同，组合式 API 允许我们以更灵活和模块化的方式组织逻辑代码。本文将深入介绍 Vue 的组合式 API，探讨其基本概念、使用场景、优点，以及如何在实际开发中利用组合式 API 编写更可维护的代码。

一、什么是组合式 API？

组合式 API 是 Vue 3 提供的一种新的组件定义方式，通过一组基于函数的 API 来组织组件的逻辑。这些 API 允许我们将组件逻辑按功能模块划分，从而在复杂的应用中更好地组织和复用代码。

与选项式 API（Options API）相比，组合式 API 提供了更灵活的逻辑组织方式，我们可以在一个 setup 函数中自由地组合、调用和复用各种响应式数据和功能。

二、组合式 API 的核心概念1. setup 函数

setup 函数是组合式 API 的核心，Vue 组件在创建时会调用它。setup 函数的返回值会暴露给组件的模板，因此可以在模板中直接使用返回的状态和方法。

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return {
      count,
      increment,
    };
  },
};

在这个例子中，我们使用了 ref 函数来定义一个响应式的 count 变量，并在 setup 函数中定义了一个 increment 方法，供模板调用。

2. 响应式 API

组合式 API 提供了一组响应式 API，用于创建和处理响应式数据。常用的响应式 API 包括 ref、reactive、computed 和 watch。

ref

用于创建一个响应式引用，适用于简单数据类型（如字符串、数字、布尔值）。

const count = ref(0);

reactive

用于创建一个响应式对象，适用于复杂数据类型（如对象、数组）。不过我并不推荐使用 reactive，定义数组和对象的响应式引用，我推荐还是使用 ref。后续将更新一篇文章的详细的对比下 ref 和 reactive，在这里就不展开了

const state = reactive({
  count: 0,
  message: "Hello Vue",
});

computed

用于创建一个计算属性，它基于其他响应式数据，并在这些数据变化时自动更新。

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

watch

用于监听响应式数据的变化，并执行特定的回调函数。

watch(
  () => state.count,
  (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }
);

3. 生命周期钩子

组合式 API 中提供了与选项式 API 对应的生命周期钩子函数，这些函数可以在 setup 函数中调用，并允许我们在组件的不同生命周期阶段执行相应的逻辑。

import { onMounted, onUnmounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      console.log("Component is mounted");
    });
    onUnmounted(() => {
      console.log("Component is unmounted");
    });
  },
};

常用的生命周期钩子包括 onMounted、onUpdated、onUnmounted 等。想要详细了解的小伙伴可以跳转至vue 生命周期详解

三、组合式 API 的优点1. 更好的逻辑组织

在使用选项式 API 时，不同功能的代码可能会分散在 data、methods、computed 等选项中。而组合式 API 允许将相关功能的代码集中在一起，使代码结构更加清晰和易于维护。

// 选项式 API 示例
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
// 组合式 API 示例
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  }
};

2. 逻辑复用

组合式 API 通过可组合的函数模块（即组合函数）来复用逻辑。组合函数可以独立于组件定义，并在多个组件中复用，增强了代码的可维护性和可重用性。

// 组合函数示例
function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}
export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  },
};

3. 更好的类型支持

组合式 API 与 TypeScript 的类型系统更好地集成，可以提供更强的类型推导和检查，使得代码更可靠。

import { ref } from "vue";
export default {
  setup() {
    const count = ref<number>(0);
    return { count };
  },
};

四、实际开发中的应用示例1. 表单处理

假设我们有一个复杂的表单，需要处理多种输入和验证逻辑。通过组合式 API，可以将表单处理逻辑划分为多个组合函数，以便更好地组织代码。

function useFormField(initialValue = "") {
  const value = ref(initialValue);
  const error = ref("");
  function validate() {
    if (!value.value) {
      error.value = "This field is required";
    } else {
      error.value = "";
    }
  }
  return {
    value,
    error,
    validate,
  };
}
export default {
  setup() {
    const nameField = useFormField();
    const emailField = useFormField();
    function submitForm() {
      nameField.validate();
      emailField.validate();
      if (!nameField.error.value && !emailField.error.value) {
        console.log("Form submitted:", {
          name: nameField.value,
          email: emailField.value,
        });
      }
    }
    return {
      nameField,
      emailField,
      submitForm,
    };
  },
};

2. 复杂的业务逻辑拆分

在实际开发中，组件的业务逻辑往往复杂且多样。通过组合式 API，可以将复杂的逻辑拆分成多个组合函数，使得每个函数专注于处理某一部分逻辑，进而提高代码的可读性和可维护性。

function useUserAuthentication() {
  const user = reactive({ loggedIn: false, name: "" });
  function login(name) {
    user.name = name;
    user.loggedIn = true;
  }
  function logout() {
    user.name = "";
    user.loggedIn = false;
  }
  return { user, login, logout };
}
function useUserPermissions() {
  const permissions = ref([]);
  function fetchPermissions() {
    // 模拟 API 调用
    permissions.value = ["read", "write", "execute"];
  }
  return { permissions, fetchPermissions };
}
export default {
  setup() {
    const { user, login, logout } = useUserAuthentication();
    const { permissions, fetchPermissions } = useUserPermissions();
    onMounted(fetchPermissions);
    return { user, login, logout, permissions };
  },
};

五、组合式 API 与选项式 API 的对比

虽然组合式 API 提供了更多的灵活性，但选项式 API 在某些简单场景下仍然是一个不错的选择，特别是对于那些熟悉 Vue 2 的小伙伴们。以下是两者的一些关键对比：

六、总结

Vue 的组合式 API 引入了一种新的方式来构建和组织 Vue 组件。它提供了更大的灵活性和可维护性，使我们能够更好地管理复杂的逻辑和状态。通过组合式 API，我们可以创建更加模块化和复用性强的代码，同时提高代码的清晰度和可读性。

在实际开发中，组合式 API 特别适合处理复杂的组件逻辑、表单处理、业务逻辑拆分等场景。对于构建大型应用或需要更高代码可维护性方面，组合式 API 是一个强大的工具。随着 Vue3 的不断普及，组合式 API 将成为 Vue 开发的主流选择。