前端vue核心知识点

一、JavaScript 基础（必须非常熟）

1️⃣ 基础语法

• let / const / var 区别
• 解构赋值
• 展开运算符 ...
• 模板字符串 ${}

2️⃣ 函数

• 普通函数 vs 箭头函数
• this 指向规则
• 高阶函数（函数作为参数 / 返回值）

3️⃣ 异步编程 ⭐⭐⭐

• Promise（三种状态）
• then / catch
• async / await
• 错误传播：throw、try...catch

👉 你现在已经在真实项目里用到 Promise + async/await 了

---

二、Vue 3 核心概念（重中之重）

4️⃣ 组件化思想

• 一个 .vue 文件 = 一个组件
• 父组件 / 子组件
• 组件复用

---

5️⃣ Composition API ⭐⭐⭐

• setup()
• ref / reactive
• computed
• watch

---

6️⃣ Vue 生命周期 ⭐⭐⭐

（前端必背）

• setup
• onMounted
• onUpdated
• onUnmounted

👉 你现在已经正确使用了 onMounted

---

7️⃣ 模板语法

• v-if / v-else
• v-for
• v-model
• 事件绑定：@click
• 属性绑定：:prop

---

8️⃣ props（组件通信）

• 父 → 子传值
• 只读
• 类型校验

---

三、Vue Router（页面与权限）

9️⃣ 路由基础

• createRouter
• createWebHistory
• routes 配置
• redirect

---

🔟 路由跳转方式

• <RouterLink>
• router.push()

---

1️⃣1️⃣ 路由守卫 ⭐⭐⭐

• 全局路由守卫 beforeEach
• 路由 meta 信息
• 权限控制（requiresAuth）

👉 你已经写出了标准的登录态路由拦截

---

四、Pinia（状态管理）⭐⭐⭐

1️⃣2️⃣ 什么是状态管理

• 全局共享状态
• 跨组件通信
• 单一数据源

---

1️⃣3️⃣ Pinia 核心概念

• defineStore
• state
• actions
• getters
• useXxxStore()

---

1️⃣4️⃣ 状态设计（非常重要）

• currentUser
• 初始化标记
• Promise 锁（你已经写了）

👉 这是中高级前端才会写的状态结构

---

五、前后端交互（HTTP）

1️⃣5️⃣ HTTP 基础

• GET / POST
• 请求参数
• 响应状态码

---

1️⃣6️⃣ 状态码语义（必会）

• 200：成功
• 401：未登录
• 403：无权限
• 500：服务器错误

👉 你已经正确使用了 401

---

1️⃣7️⃣ axios / http 封装

• 请求函数统一管理
• 错误统一处理
• 返回数据类型定义

---

六、登录态与权限体系（你这套的核心）

1️⃣8️⃣ 登录态本质

• 后端：Session / Cookie
• 前端：Pinia 状态

---

1️⃣9️⃣ 登录态初始化

• /user/current
• 页面刷新恢复状态
• 防止 Pinia 刷新丢失

---

2️⃣0️⃣ 登录态拦截

• 路由 meta
• 路由守卫
• 未登录跳转 /login

---

七、项目结构认知（工程能力）

2️⃣1️⃣ 文件职责划分

• main.ts：入口
• App.vue：根组件
• router/：路由
• stores/：状态
• api/：接口
• pages/：页面

---

2️⃣2️⃣ 职责分离原则 ⭐⭐⭐

• 组件 ≠ 状态
• 状态 ≠ 接口
• 路由 ≠ 业务

---

八、你现在已经"掌握"的部分（给你信心）

你目前已经实战掌握：

✅ Promise / async / await

✅ Vue 生命周期

✅ Pinia 状态管理

✅ 登录态初始化

✅ 路由守卫

✅ 权限控制

✅ 前后端 Session 协作

👉 这已经超过"Vue 入门"，是"真实项目水平"

---