WenSen博客

一、 为什么要使用 Composition API？

在 Vue2 中，我们习惯使用 Options API，将代码逻辑分散在 data、methods、computed 中。随着组件复杂度的增加，这种方式导致了“逻辑关注点分离”的问题。

Composition API 的核心目标是将逻辑关注点聚集在一起，便于复用和维护。

二、 核心语法：setup 与 reactive

下面是一个简单的计数器示例，展示了如何使用 setup 语法糖：

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
// 1. 定义响应式数据

const count = ref(0);

const user = reactive({

name: 'Admin',

role: 'Developer'

});
// 2. 定义方法

const increment = () => {

count.value++;

console.log(当前计数: ${count.value});

};
// 3. 生命周期钩子

onMounted(() => {

console.log('组件已挂载');

});

</script>

三、 逻辑复用：Hooks 模式

在 Vue3 中，我们可以像 React Hooks 一样提取通用逻辑。例如，提取一个鼠标追踪功能的 Hook：

// useMouse.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useMouse() {

const x = ref(0);

const y = ref(0);

        

          

            

            

              
              复制代码
              
              
            
          
          
function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
}

onMounted(() => window.addEventListener('mousemove', update));
onUnmounted(() => window.removeEventListener('mousemove', update));

return { x, y };

        
      
}

这种方式彻底告别了 Vue2 中 Mixins 命名冲突和来源不清的问题。

四、 总结

Composition API 并非要完全取代 Options API，但在构建大型、复杂的企业级应用时，它提供了更好的代码组织能力和 TypeScript 支持。