Vue3 组合式API 标准写法（通俗易懂，可直接复制）
Vue3 组合式API 标准写法（通俗易懂，可直接复制）
Vue3 的组合式 API (Composition API) 是官方推荐的核心写法，最简单、最常用的形式是
💡 核心提示：组合式API的核心优势是「逻辑内聚」，所有相关逻辑可集中编写，解决Vue2选项式API代码分散的问题，是目前Vue开发的标准写法。
一、核心前提：固定组件结构（必记）
Vue3 组合式API的标准单文件组件（SFC）结构，固定分为3部分，无需额外配置：
vue
<template>
<!-- 页面结构（HTML）：直接使用脚本中定义的变量/函数 -->
</template>
<!-- ✅ 组合式API核心：添加 setup 语法糖 -->
<script setup>
// 所有逻辑写在这里：数据、方法、生命周期、导入依赖等
</script>
<style scoped>
/* 组件样式：scoped 代表样式仅作用于当前组件，避免污染全局 */
</style>二、分步教学：组合式API 核心写法（按步骤来，零出错）
步骤1：按需导入所需API
Vue3 采用「按需导入」机制，用什么API就导入什么，无需全局引入，最常用的API如下：
javascript
// 导入最常用的核心API
import { ref, reactive, computed, watch, onMounted } from 'vue'步骤2：定义响应式数据（页面自动更新）
根据数据类型选择对应API，核心区分如下，记住口诀即可：
📌 口诀：单个值（数字/字符串/布尔）用 ref；对象/数组用 reactive
vue
<script setup>
import { ref, reactive } from 'vue'
// 1. 基础类型数据（数字、字符串、布尔）→ 用 ref
const count = ref(0) // 数字
const name = ref('小明') // 字符串
const isShow = ref(false) // 布尔
// 2. 对象/数组数据 → 用 reactive
const user = reactive({ // 对象
age: 18,
gender: '男',
address: '北京'
})
const list = reactive([1, 2, 3, 4]) // 数组
</script>步骤3：定义方法（交互逻辑，无需methods）
组合式API中，无需将方法放入methods对象，直接定义函数即可，模板中直接调用：
vue
<template>
<!-- 模板中直接调用函数，无需额外配置 -->
<button @click="add">计数+1</button>
<button @click="sayHi">弹出问候</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
// 直接定义点击方法（修改ref数据需加 .value）
const add = () => {
count.value++ // 重点：ref数据在脚本中必须用 .value 读写
}
// 普通交互方法
const sayHi = () => {
alert(`你好，${name.value}`)
}
</script>步骤4：计算属性（computed，自动依赖更新）
当需要根据已有数据计算新值时，用computed，数据变化时会自动重新计算，无需手动触发：
javascript
import { ref, computed } from 'vue'
const count = ref(2)
// 计算属性：双倍计数（依赖count，count变，doubleCount自动变）
const doubleCount = computed(() => {
return count.value * 2
})
// 复杂计算示例：过滤数组
const list = ref([1, 2, 3, 4, 5])
const filterList = computed(() => {
return list.value.filter(item => item > 2)
})步骤5：侦听器（watch，监听数据变化）
当需要监听某个数据变化，执行异步操作（如请求接口）或复杂逻辑时，用watch：
javascript
import { ref, watch } from 'vue'
const count = ref(0)
// 监听count的变化（newVal：新值，oldVal：旧值）
watch(count, (newVal, oldVal) => {
console.log(`计数从 ${oldVal} 变为 ${newVal}`)
// 异步操作示例：计数达到5时请求接口
if (newVal === 5) {
// fetch('/api/data')
}
})步骤6：生命周期钩子（如页面加载完成）
组合式API的生命周期钩子，均以「on」为前缀，按需导入使用，最常用的是onMounted（页面挂载完成）：
javascript
import { onMounted, onUnmounted } from 'vue'
// 页面挂载完成（等价于Vue2的mounted）
onMounted(() => {
console.log('组件加载完成！')
// 常用场景：页面加载后请求初始数据、获取DOM元素
})
// 组件卸载前（等价于Vue2的beforeDestroy）
onUnmounted(() => {
console.log('组件即将卸载！')
// 常用场景：清除定时器、取消请求
})步骤7：使用子组件（无需注册，直接导入）
组合式API中，子组件无需在components中注册，直接导入即可使用，简化组件引用流程：
vue
<template>
<!-- 直接使用导入的子组件 -->
<Child />
<UserInfo />
</template>
<script setup>
// 直接导入子组件，自动注册，无需额外配置
import Child from './Child.vue'
import UserInfo from './components/UserInfo.vue'
</script>三、完整可运行案例（直接复制使用）
以下案例包含所有常用功能，复制到.vue文件中即可运行，可直接参考仿写：
vue
<template>
<div class="composition-box">
<h2>{{ name }}</h2>
<p>当前计数：{{ count }}</p>
<p>双倍计数：{{ doubleCount }}</p>
<button @click="add" class="btn">计数+1</button>
<button @click="reset" class="btn">重置计数</button>
</div>
</template>
<script setup>
// 1. 导入所需API
import { ref, computed, watch, onMounted } from 'vue'
// 2. 定义响应式数据
const name = ref('Vue3 组合式API 示例')
const count = ref(0)
// 3. 计算属性
const doubleCount = computed(() => count.value * 2)
// 4. 定义方法
const add = () => {
count.value++
}
const reset = () => {
count.value = 0
}
// 5. 侦听器
watch(count, (newVal) => {
if (newVal === 5) {
alert('计数已达到5啦！')
}
})
// 6. 生命周期
onMounted(() => {
console.log('组件加载完成，可在此处请求数据')
})
</script>
<style scoped>
.composition-box {
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
max-width: 400px;
margin: 20px auto;
}
.btn {
padding: 6px 12px;
margin-right: 10px;
cursor: pointer;
background: #42b983;
color: #fff;
border: none;
border-radius: 4px;
}
.btn:hover {
background: #359469;
}
</style>四、Vue2 选项式API vs Vue3 组合式API（对比清晰）
通过对比，快速掌握两者区别，轻松从Vue2过渡到Vue3：
| 功能 | Vue2 选项式API | Vue3 组合式API（ |
|---|
五、新手必记 3 个核心规则（避坑关键）
- 变量/函数无需return：
✅ 总结：组合式API的核心就是「在