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