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的核心就是「在