一、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）、性能优化（虚拟列表、懒加载）。
