Vue.js 什么是 Composition API？

Vue.js 什么是 Composition API？

今天我们来聊聊 Vue 3 引入的一个重要特性：组合式 API（Composition API）。如果你曾在开发复杂的 Vue 组件时感到代码难以维护，那么组合式 API 可能正是你需要的工具。

什么是组合式 API？

组合式 API 是 Vue 3 提供的一套基于函数的 API，允许开发者以更灵活的方式组织组件逻辑。与传统的选项式 API（Options API）不同，组合式 API 使我们能够根据功能将相关代码组合在一起，提升代码的可读性和可维护性。

为什么引入组合式 API？

在使用选项式 API 时，组件的逻辑通常分散在不同的选项中（如 data、methods、computed 等）。当组件变得复杂时，相关逻辑可能被拆散，导致代码难以阅读和维护。组合式 API 通过允许我们将相关逻辑集中在一起，解决了这一问题。

组合式 API 的核心概念

1. setup 函数

   setup 是组合式 API 的入口函数。它在组件实例创建之前执行，用于初始化组件的 props、状态和逻辑。

   <script setup>
   import { ref } from 'vue';
   
   // 定义一个响应式变量
   const count = ref(0);
   
   // 定义一个方法来更新变量
   function increment() {
     count.value++;
   }
   </script>
   
   <template>
     <div>
       <p>当前计数：{{ count }}</p>
       <button @click="increment">增加</button>
     </div>
   </template>
   

   在上述示例中，setup 函数使用 ref 创建了一个响应式变量 count，并定义了一个方法 increment 来更新该变量。

2. 响应式 API

   组合式 API 提供了 ref 和 reactive 等函数来创建响应式状态：

   • ref：用于创建包含单一值的响应式引用。

     const count = ref(0);
     console.log(count.value); // 输出: 0
     

   • reactive：用于创建包含多个属性的响应式对象。

     const user = reactive({
       name: 'Alice',
       age: 25
     });
     console.log(user.name); // 输出: Alice
     

3. 生命周期钩子

   在组合式 API 中，生命周期钩子以函数形式提供，例如 onMounted、onUpdated 和 onUnmounted。

   import { onMounted } from 'vue';
   
   onMounted(() => {
     console.log('组件已挂载');
   });
   

组合式 API 的优势

• 更好的代码组织：将相关逻辑集中在一起，提升代码可读性。
• 逻辑复用：通过创建可复用的函数，实现逻辑的共享和复用。
• TypeScript 支持：组合式 API 对 TypeScript 具有更好的支持，提供了更强的类型推断和检查。

总结
组合式 API 为 Vue 开发者提供了一种更灵活、高效的方式来组织和复用代码。通过掌握组合式 API，你可以更轻松地管理复杂组件的逻辑，提高代码的可维护性和可读性。