从后端视角学习 Vue3：核心知识与数据流实践

从后端 Java 开发视角切入 Vue3，通过类比熟悉的后端模型进行理解，整体学习效率明显提升。

一、Vue3 本质

Vue3 的核心可以概括为：

响应式系统（ref / reactive，基于 Proxy）
组合式 API（setup）
编译优化（性能更优）

示例

复制代码

import { ref } from 'vue'

const count = ref(0)
count.value++

👉 从后端视角理解：

类似"数据变更 → 自动触发更新"，类似于观察者模式。

二、组件通信

常见方式：

父 → 子：props
子 → 父：emit
内容分发：slots

👉 实战建议：

v-for 必须加 key（避免渲染异常）
组件职责尽量单一（类似后端 Service 拆分）

三、路由（Vue Router）

作用：URL → 组件映射

核心能力：

路由懒加载（优化性能）
路由守卫（权限控制）
keepAlive（页面缓存）
404 兜底，统一页面显示

👉 类比后端：

复制代码

URL → Controller → 处理逻辑

四、状态管理（Pinia）

Vue3 推荐使用 Pinia：

state：数据
- 运行时状态（内存）页面一刷新就没了

五、数据持久化

常见方式：

localStorage（长期）
sessionStorage（短期）
Pinia 持久化插件
- 自动同步运行时状态和持久化存储
- store变化 → 自动写localStorage
- 页面刷新 → 自动恢复store

六、核心：前端数据流（重点）

从后端角度看，前端数据流非常类似分层架构：

复制代码

Component → Store → Service → API

对应流程：

复制代码

接口请求 → 数据处理 → 写入 store

分层示例

1️⃣ API 层（纯 HTTP）

复制代码

export function searchFlight(params) {
  return request.post('/flight/search', params)
}

2️⃣ Service 层（数据转换）

复制代码

export async function getFlightList(params) {
  const res = await searchFlight(params)

  // 数据适配（非常关键）
  return res.data.map(item => ({
    flightNo: item.fn,
    price: item.p
  }))
}

3️⃣ Store 层（状态管理）

复制代码

async fetchFlights(params) {
  const data = await getFlightList(params)
  this.list = data
}

👉 核心原则：

❌ 不要在组件直接调接口
✅ Service 层做数据转换
✅ Store 只负责状态

七、环境配置（Vite）

使用环境变量：

复制代码

.env.development
.env.production

使用方式：

复制代码

const baseURL = import.meta.env.VITE_API_URL

👉 优点：

避免硬编码，见过直接硬编码的估计没考虑拓展性
支持多环境

八、结合后端的一点实践思考

在实际项目中，一次前端请求背后可能是：

复制代码

前端请求 → 后端接口 → HTTP调用 → 第三方服务

当接口变慢时：

前端表现：加载慢 / 卡住
后端可能：线程阻塞（如 socketRead0）

👉 因此需要关注：

是否设置 HTTP 超时？
是否有 loading 状态？
是否做异常兜底？

最后总结下

从后端视角对 Vue3 进行了阶段性学习总结，重点包括：

Vue3 核心机制（响应式、组件）
路由与状态管理
标准数据流（Component → Store → Service → API）
前后端链路理解