Vue Composition API的快速上手指南

一、基础搭建

1. ‌创建组件入口‌
   使用setup()函数替代传统选项式API，作为组件逻辑的主入口 

     可通过 <script setup> 语法糖实现更简洁的声明：

<script setup>import { ref } from 'vue'</script>

‌响应式数据定义‌

• 基本类型用ref()

const count = ref(0) // 通过.value访问

对象类型用reactive()：

const user = reactive({ name: 'Alice' })

需配合toRefs()解构保持响应性

二、功能实现

3. ‌生命周期管理‌
   将传统钩子转换为前缀on的函数形式：

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

3. 支持在同一setup中多次调用同一类型钩子

4. ‌计算与监听‌

5.   计算属性：

const doubleCount = computed(() => count.value * 2)

        副作用监听：

watch(count, (newVal) => {  console.log('count变化:', newVal)})

三、进阶配置

5. ‌CDN引入方案‌
   若通过CDN使用需：

• 引入完整版vue.global.js

• 启用ES Module支持：

<script type="module">  const { createApp, ref } = Vue</script>

• 确保包含reactivity模块

5. ‌代码组织优化‌

• 按功能模块拆分逻辑：

// userLogic.jsexport function useUser() {  const user = ref(null)  const fetchUser = async () => {...}  return { user, fetchUser }}

• 集成VueUse等工具库增强功能

---

四、最佳实践

• ‌类型安全‌：结合TypeScript使用可获得完整类型推断支持

• ‌渐进迁移‌：旧项目可在新功能中优先采用，逐步替代Options API

• ‌渲染函数‌：需要直接控制DOM时可使用h()函数返回虚拟节点

‌适用场景‌：推荐在逻辑复杂的大型项目中使用，小型简单组件仍可采用Options API保持简洁性