Vue知识框架

一、Vue 基础核心

1. 响应式原理

数据驱动：通过 data 定义响应式数据，视图自动同步数据变化。

2、核心机制

Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）实现数据劫持。
依赖收集：追踪数据与视图的依赖关系，触发精准更新。
虚拟 DOM（Virtual DOM）：对比新旧 VDOM 差异，最小化 DOM 操作。

3. 组件化开发

（1）单文件组件（.vue）:

<templete>:HTML模板，支持插值表达式和指令。
<script>:组件逻辑，选项式API和组合式API。
<style>:组件样式，支持scoped隔离样式。

（2）组件通信

父子组件：props父传子$emit子传父
跨组件：全局状态管理工具，Vuex，Pinia，事件总线
插槽：内容分发。

4、指令系统

v-bind ：绑定属性（简写 : ，如 :class 、 :style ）。
v-on ：绑定事件（简写 @ ，如 @click 、 @input ）。
v-model ：双向数据绑定（表单元素常用）。
v-if / v-else-if / v-else ：条件渲染。
v-for ：列表渲染（需配合 :key 优化 diff 算法）。
v-show ：控制元素显示/隐藏（基于 CSS display ）。
自定义指令：通过 directives 配置，用于 DOM 操作（如权限控制、防抖）。

二、Vue 进阶特性

1. 生命周期钩子

创建阶段： beforeCreate （实例刚创建，无数据）→ created （数据初始化完成，可调用 API）。
- 挂载阶段： beforeMount （模板编译前）→ mounted （挂载到 DOM 后，可操作 DOM）。
- 更新阶段： beforeUpdate （数据更新前）→ updated （数据更新后，DOM 已同步）。
- 卸载阶段： beforeUnmount （卸载前）→ unmounted （组件销毁后，清理定时器等）。
- 错误处理： errorCaptured （捕获子组件错误）。

2、计算属性和监听属性

computed：基于以来缓存结果，只有依赖变化时才会重新计算。
watch：监听特定数据变化，执行异步或复杂逻辑。

3、过渡和动画

内置组件： <transition> （单元素/组件过渡）、 <transition-group> （列表过渡）。
CSS 类名： v-enter / v-enter-active 等，配合 CSS 动画或第三方库（如 Animate.css）。
JavaScript 钩子： before-enter 、 after-enter 等，可自定义 JS 动画。

4. 路由管理

声明式导航： <router-link to="/path"> 跳转， <router-view> 渲染组件。
路由模式： hash （默认，兼容性好）、 history （需服务端配置）。
动态路由： :id 匹配参数（如 /user/:id ），通过 $route.params 访问。
路由守卫：全局守卫（ router.beforeEach ）、组件内守卫（ beforeRouteEnter ）。
嵌套路由：通过 children 配置多级路由（如 /user/1/profile ）。

三、Vue生态和周边

1、状态管理工具

Vuex：state （状态）、 mutations （同步修改）、 actions （异步逻辑）、 getters （计算属性）。
Pinia：轻量级、支持组合式 API（ setup 语法糖），替代 Vuex 的趋势。

2、构建工具与工程化

Vue CLI：官方脚手架，一键搭建项目（配置 Webpack/Vite、Babel 等）。
Vite：基于 ES Module 的极速构建工具，适合 Vue 3.x 项目（开发环境无需打包）。
TypeScript 支持：Vue 3.x 内置 TypeScript 类型定义， defineComponent 推断组件类型。

3、常用组件库

Element UI（Vue 2）/ Element Plus（Vue 3）：PC 端组件库。
Vuetify：Material 风格组件库，支持响应式设计。
Naive UI：轻量、美观的 Vue 3 组件库。

4、常用工具库

Axios：HTTP 请求库（封装 this.$axios 或 useAxios ）。
Lodash：常用函数库（防抖 debounce 、节流 throttle 等）。
Dayjs：轻量级日期处理库。

5、全栈与服务端渲染

Nuxt.js：Vue 生态 SSR 框架，支持静态站点生成和服务器端渲染，简化 SEO 和首屏加载。
Express/Koa + Vue：手动实现 SSR（需处理数据预取、状态同步等）。

四、Vue3 新特性

1、Composition API

setup 函数：替代 Vue 2 的 options API ，逻辑复用更灵活（ ref / reactive 定义响应式数据）。
组合函数（Hook）：自定义逻辑复用（如 useMousePosition ）。

2、Teleport（传送门）

将组件模板渲染到 DOM 任意位置（如模态窗挂载到 body 下）。

3、Suspense

处理异步依赖（如动态组件加载），支持 loading 和 fallback 状态。

4、响应式系统升级

基于 Proxy 实现，支持原生数组和对象嵌套，性能更优。

五、学习路径建议

入门：掌握基础语法（模板、指令、组件）、生命周期、Vue Router。
进阶：深入响应式原理、组合式 API、状态管理（Pinia）、自定义指令。
实战：开发中小型项目（如博客、电商），结合组件库和工程化工具。
拓展：学习 SSR（Nuxt.js）、单元测试（Jest/Vitest）、性能优化（虚拟列表、懒加载）。