Vue3 Composition API：更灵活的组件逻辑复用方式

Vue3引入的Composition API是一种全新的组件逻辑组织方式。相比于Vue2的Options API，Composition API提供了更灵活、更强大的代码组织能力。本文将详细介绍Composition API的核心概念和使用方法。

为什么需要Composition API

在大型项目中，使用Options API（data、methods、computed等）可能会导致相关逻辑分散在不同的选项中。例如，一个功能相关的代码可能分布在data、methods、computed、watch中，维护起来比较困难。

Composition API允许我们根据功能而非选项类型来组织代码，让相关的逻辑更加集中。

核心函数：setup

setup是Composition API的入口点，在组件实例创建之前执行。setup函数接收props和context两个参数。

export default {
    setup(props, context) {
        const message = ref('Hello Vue3');
        const count = ref(0);

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

        return {
            message,
            count,
            increment
        };
    }
}

响应式系统

Composition API提供了两个重要的响应式API：ref和reactive。

ref用于包装基本类型的响应式数据，访问时需要通过.value。reactive用于创建对象的响应式副本。

const count = ref(0);
const state = reactive({
    name: 'Vue3',
    version: '3.0'
});

逻辑复用：Composables

Composition API最大的优势之一是更容易实现逻辑复用。我们可以将某些逻辑抽取到独立的函数中，这些函数被称为"Composables"或"组合式函数"。

function useCounter(initialCount) {
    const count = ref(initialCount);
    const increment = () => count.value++;
    const decrement = () => count.value--;
    return { count, increment, decrement };
}

这样在任何组件中都可以使用这个逻辑，只需调用useCounter函数即可。

生命周期钩子

在Composition API中，生命周期钩子需要显式导入和调用。常用的钩子包括onMounted、onUpdated、onUnmounted等。

import { onMounted, onUnmounted } from 'vue';

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

onUnmounted(() => {
    console.log('组件已卸载');
});