Java 后端开发者理解 Vue:从 Controller 思维到响应式 UI
Java 后端开发者理解 Vue:从 Controller 思维到响应式 UI 如果你已经会 Java,熟悉 Spring、Controller、Service、DTO、Repository、拦截器、配置文件和请求响应链路,那么你看 Vue 代码时,大概率不是“完全看不懂”。你能看懂变量、函数、条件判断、数组遍历,也大概知道 <div>、<span>、class、@click、:disabled 在页面上会产生某些效果。 真正的问题通常不在“语法完全陌生”,而在于:你会不自觉用后端的心智模型去解释前端。 你可能会把 .vue 文件里的 <template> 当成类似 Spring XML、JSP、Thymeleaf 的配置或模板;会把 props 理解成 DTO 字段;会把 emit() 想成直接调用父组件方法;会把 v-model 想成子组件直接修改父组件变量;会把页面更新理解成“重新请求一次接口然后刷新页面”。这些直觉有一部分能帮你入门,但在 Vue 的核心机制上会误导你。 本文的目标不是泛泛讲 Vue,而是站在 Java/Spring 后端开发者的视角,把最容易困惑的部分拆开:Vue 页面为什么会自动刷新、ref() 和 .value 到底是什么、v-model 双向绑定是不是魔法、:xxx 和 @xxx 为什么不是普通 XML 属性、组件之间为什么要 props 向下 emit 向上,以及 Element Plus 组件、插槽、scoped CSS、:deep() 这些东西应该如何理解。 1. 先纠正一个根本误区:Vue 页面不是一次请求生成一次响应 后端开发者最熟悉的链路通常是: HTTP 请求 -> Controller -> Service -> Repository / Mapper -> 返回 JSON 或 HTML -> 本次请求结束 这个模型的核心是“一次请求,一次处理,一次响应”。 ...