Vue 3 组合式API完全指南

Vue 3 引入的组合式API是对Vue编程模式的一次重大改进，它提供了一种更灵活的方式来组织和复用组件逻辑。相比于Vue 2的Options API，组合式API允许我们根据逻辑功能来组织代码，而不是根据选项类型。

为什么要使用组合式API？

在大型组件中，使用Options API往往会导致代码难以维护：

• 相关的逻辑分散在data、methods、computed等不同选项中
• 跨选项的重构变得困难
• 代码复用需要通过mixins，而mixins存在命名冲突和来源不清晰等问题

组合式API解决了这些问题，它允许我们将相关的逻辑组织在一起，并且提供了更清晰的代码复用方式。

setup函数

组合式API的入口是setup函数，它在组件创建之前执行：

export default {
  setup() {
    // 组合式API的代码在这里编写
    console.log('组件创建之前执行');
    
    // 返回值会暴露给模板和其他选项
    return {
      message: 'Hello Vue 3'
    }
  },
  mounted() {
    console.log('组件挂载完成');
  }
}

注意：setup函数中没有this，因为它在组件实例创建之前执行。

响应式API

组合式API提供了一系列创建响应式数据的函数：

ref

用于创建基本类型的响应式数据：

import { ref } from 'vue';

export default {
  setup() {
    // 创建响应式数据
    const count = ref(0);
    
    // 修改数据
    const increment = () => {
      // 在setup中访问ref的值需要使用.value
      count.value++;
    };
    
    // 返回给模板
    return {
      count,
      increment
    }
  }
}

在模板中使用时，不需要.value，Vue会自动解包：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

reactive

用于创建对象类型的响应式数据：

import { reactive } from 'vue';

export default {
  setup() {
    // 创建响应式对象
    const user = reactive({
      name: '张三',
      age: 30
    });
    
    // 修改数据
    const updateUser = () => {
      user.name = '李四';
      user.age = 25;
    };
    
    return {
      user,
      updateUser
    }
  }
}

生命周期钩子

组合式API提供了与Options API对应的生命周期钩子，但需要从vue中导入：

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载完成');
    });
    
    onUpdated(() => {
      console.log('组件更新完成');
    });
    
    onUnmounted(() => {
      console.log('组件卸载完成');
    });
  }
}

组合函数

组合式API的一大优势是可以轻松地提取和复用逻辑，这些被提取的逻辑称为组合函数：

// useCounter.js
import { ref, onMounted } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  
  // 可以包含生命周期逻辑
  onMounted(() => {
    console.log('计数器初始化');
  });
  
  return {
    count,
    increment
  };
}

在组件中使用：

import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();
    
    return {
      count,
      increment
    };
  }
}

总结

组合式API为Vue开发提供了更灵活的代码组织方式，特别适合大型应用。它的主要优势包括：

• 按逻辑功能组织代码，提高可读性和可维护性
• 更清晰的代码复用方式，避免了mixins的问题
• 更好的TypeScript支持
• 更灵活的逻辑组合

虽然组合式API是Vue 3的新特性，但Options API仍然被支持，你可以根据项目需求和团队习惯选择合适的方式。