Vue Composition API的快速上手指南
一、基础搭建
创建组件入口
使用setup()函数替代传统选项式API，作为组件逻辑的主入口
可通过 <script setup> 语法糖实现更简洁的声明：
<script setup>import { ref } from 'vue'</script>响应式数据定义
基本类型用
ref()const count = ref(0) // 通过.value访问对象类型用
reactive()：const user = reactive({ name: 'Alice' })需配合
toRefs()解构保持响应性二、功能实现
生命周期管理
将传统钩子转换为前缀on的函数形式：import { onMounted } from 'vue'onMounted(() => { console.log('组件挂载完成')})
支持在同一setup中多次调用同一类型钩子
计算与监听
计算属性：
const doubleCount = computed(() => count.value * 2)副作用监听：
watch(count, (newVal) => { console.log('count变化:', newVal)})三、进阶配置
CDN引入方案
若通过CDN使用需：
引入完整版
vue.global.js启用ES Module支持：
<script type="module"> const { createApp, ref } = Vue</script>
确保包含reactivity模块
代码组织优化
按功能模块拆分逻辑：
// userLogic.jsexport function useUser() { const user = ref(null) const fetchUser = async () => {...} return { user, fetchUser }}
集成VueUse等工具库增强功能
四、最佳实践
类型安全：结合TypeScript使用可获得完整类型推断支持
渐进迁移：旧项目可在新功能中优先采用，逐步替代Options API
渲染函数：需要直接控制DOM时可使用
h()函数返回虚拟节点适用场景：推荐在逻辑复杂的大型项目中使用，小型简单组件仍可采用Options API保持简洁性