后端开发也能搞定 Vue3？从“类与对象”的角度通过 30 分钟看懂 Composition API

☕ 前言：为什么后端以前讨厌写前端？

作为后端开发，我们习惯了类 (Class)、对象 (Object)、封装 (Encapsulation)和依赖注入 (DI)。
当我们看到 Vue2 的代码时，内心是崩溃的：

• 满屏的this：这个this到底指的是 Window 还是实例？
• 代码割裂：实现一个“搜索”功能，变量要写在data里，逻辑要写在methods里，监听要写在watch里。屏幕滚来滚去，逻辑支离破碎。

Vue3 的 Composition API（组合式 API）简直就是后端开发者的福音。
别被这个高大上的名字吓到了。在后端眼里，它本质上就是把页面逻辑写成了“Java 类”！

今天，我们忘掉前端术语，用OOP 的视角重新认识 Vue3。

---

🧩 核心映射：Vue3 就是在写 Class

在 Java/Spring 中，我们写一个业务组件通常是这样的：

publicclassCounterService{// 1. 私有成员变量 (State)privateintcount=0;// 2. 构造函数/初始化 (Init)publicCounterService(){System.out.println("初始化...");}// 3. Getter 方法 (Computed)publicintgetDoubleCount(){returncount*2;}// 4. 公共方法 (Methods)publicvoidincrement(){this.count++;}}

现在，请看 Vue3 (<script setup>) 的写法：

<script setup>import{ref,computed,onMounted}from'vue';// 1. 成员变量 (ref = private field)constcount=ref(0);// 2. 初始化 (onMounted = PostConstruct)onMounted(()=>{console.log("初始化...");});// 3. Getter 方法 (computed)constdoubleCount=computed(()=>count.value*2);// 4. 公共方法 (function = method)constincrement=()=>{count.value++;// 注意：JS里修改引用类型要用 .value};</script>

发现了吗？完全一一对应！
Vue3 终于允许我们将相关的变量和方法写在一起了，这就是“高内聚” (High Cohesion)。

---

🧱 进阶：Hooks 就是 Service 层

后端开发最讲究分层架构。Controller 负责接收请求，Service 负责业务逻辑。
在 Vue2 时代，逻辑很难复用（Mixins 是噩梦）。
但在 Vue3 中，我们可以把复杂的逻辑抽离成Hooks (Composables)。

请大声跟我念：Composables 就是前端的 Service 类！

场景：我们需要在多个页面实现“获取用户信息”的功能。

1. 定义 Service (UserHook.js)

这就像你写了一个UserService.java。

// useUser.jsimport{ref,onMounted}from'vue';import{fetchUserApi}from'./api';// 导出这个“Service”exportfunctionuseUser(){// State (DTO)constuserInfo=ref(null);constloading=ref(false);// Method (Service Logic)constgetUser=async(id)=>{loading.value=true;try{userInfo.value=awaitfetchUserApi(id);}finally{loading.value=false;}};// 暴露给外部调用的接口 (Public Interface)return{userInfo,loading,getUser};}

2. 注入 Service (UserProfile.vue)

这就像在 Controller 里@Autowired注入 Service。

<script setup>// 引入 Serviceimport{useUser}from'./hooks/useUser';// 依赖注入 (Dependency Injection)const{userInfo,loading,getUser}=useUser();// 调用方法onMounted(()=>{getUser(1001);});</script><template><div v-if="loading">加载中...</div><div v-else>你好，{{userInfo?.name}}</div></template>

架构图解：

---

⚠️ 后端转 Vue3 的两个“坑”

虽然思想互通，但语法细节上有两个坑，后端同学最容易踩：

1.ref还是reactive？（包装类 vs 原生对象）

• ref：就像 Java 的Integer、String包装类。它能包装基本类型，也能包装对象。访问值必须加.value。
  • 建议：无脑用ref，虽然多写个.value，但更安全，不会丢失响应性。
• reactive：就像 Java 的 POJO 对象。不需要.value。
  • 坑：如果你解构它 (const { name } = person), 响应性就丢了（这就好比把对象里的字段复制给了个临时变量，改临时变量不影响原对象）。

2. 生命周期（Hook 方法）

别去背beforeCreate、created了。
在<script setup>中：

• 代码直接写在根作用域=created(构造函数体)。
• onMounted=@PostConstruct(DOM 渲染完后执行，类似 Bean 初始化完成)。
• onUnmounted=@PreDestroy(组件销毁前，做清理工作)。

---

📝 总结

Vue3 Composition API 的本质，就是把前端开发从“填空题” (Options API)变成了“写作文” (Script Setup)。

对于后端开发者来说，你只需要转变一个观念：

• 组件 (Component)=类 (Class)
• Ref 数据=私有字段 (Private Fields)
• Function=方法 (Methods)
• Composable=Service 服务类

掌握了这个心法，你会发现 Vue3 的代码结构比 Spring Boot 还要清爽。