Vue3引入的Composition API是一种全新的组件逻辑组织方式，相比Options API，它能够更好地支持逻辑复用和代码组织。本文将分享在实际项目中应用Composition API的最佳实践。
一、为什么要用Composition API？传统的Options API将组件逻辑按照data、methods、computed、watch等选项进行组织，当组件逻辑复杂时，相关逻辑会被拆散在不同选项中，导致代码难以维护。Composition API允许我们按照逻辑功能组织代码，将相关的响应式数据、计算属性、方法等放在一起。
二、setup函数基础。setup是Composition API的入口点，在组件实例创建之前执行。setup函数接收props和context两个参数，返回的对象可以在模板中直接使用。需要注意的是，在setup中访问props时，需要通过props.xxx的方式。
三、响应式系统。Vue3提供了ref和reactive两个函数来创建响应式数据。ref用于包装基本类型数据，通过.value访问；reactive用于创建响应式对象。computed用于创建计算属性，watch和watchEffect用于监听数据变化。
四、生命周期钩子。Composition API中的生命周期钩子需要在setup中主动导入并调用，包括onMounted、onUpdated、onUnmounted等。
五、逻辑复用。Composition API的一大优势是支持逻辑复用。通过将相关逻辑抽取到composables函数中，可以在多个组件之间共享逻辑，实现真正的逻辑复用。