Vue 词条目录
前端Wiki/词条/组合式 API

组合式 API

定义Vue 3 的逻辑组织方式：按功能而非选项（data/methods）组织组件代码

选项式 API（Options API）把代码切成 data/methods/computed 等固定区块——相关功能被拆散在不同选项里，组件一长就「跳来跳去」。组合式 API 让你按「功能」聚拢代码：一个功能的响应式数据、方法、生命周期写在一起，还能抽成可复用的组合式函数（composables）。

组合式函数（useXxx）是组合式 API 的复用单元：把一个功能（如 useMouse 获取鼠标位置、useFetch 请求数据）封装成一个函数返回响应式状态。相比 Vue 2 的 mixin，它没有命名冲突、没有隐式依赖、来源清晰可追溯。

HTML
<div id="app">
  <p>鼠标位置：{{ x }}, {{ y }}</p>
</div>
<script>
  const { createApp, ref, onMounted, onUnmounted } = Vue;

  // ★ 组合式函数：一个功能 = 一段独立逻辑
  function useMouse() {
    const x = ref(0), y = ref(0);
    const move = e => { x.value = e.x; y.value = e.y; };
    onMounted(() => addEventListener('mousemove', move));
    onUnmounted(() => removeEventListener('mousemove', move));
    return { x, y };
  }

  createApp({
    setup() { return { ...useMouse() }; },   // 多功能可叠
  }).mount('#app');
</script>
⚠ 常见误区
🔗 相关词条ref 与 reactive计算属性与侦听器Vue 是什么
← 返回来源章节组合式函数 composables