Vue

本文是 Vue 知识体系速览（概念地图，截至 2026-10，基于 Vue 3.x）。深入内容见系列文章：手写一个 mini 响应式系统。

Vue快速上手

快速上手（Vue 3 官方脚手架为 create-vue，基于 Vite）

Vue.js 是一款流行的前端 JavaScript 框架，用于构建可维护性高、易于扩展的现代化Web应用程序。其知识体系涵盖了从基础概念到高级特性的多个方面。以下是对Vue知识体系的概括：

核心概念

MVVM架构

Vue遵循Model-View-ViewModel (MVVM) 设计模式，其中：

• Model：代表应用程序的数据模型，通常包含业务逻辑和数据处理。
• View：用户界面，由HTML模板和CSS样式构成，显示Model的状态。
• ViewModel：作为连接Model与View的中间层，负责同步数据变化、处理用户交互和封装UI逻辑。在Vue中，ViewModel对应的就是Vue实例。

组件化开发

Vue强调组件化编程，将UI拆分成独立、可复用的部分（组件）。每个组件有自己的视图模板、逻辑（数据和方法）以及可配置的选项，如props、slots、events等。

响应式系统

Vue 通过 Proxy 拦截数据的读取与写入，实现依赖收集（track）与更新触发（trigger）。当数据发生变化时，依赖该数据的视图会自动更新。

深入原理可阅读：手写一个 mini 响应式系统

模板语法

Vue提供了简洁易读的模板语言，支持：

• 数据绑定：使用{{ expression }}插值语法插入数据。
• 指令：如v-bind、v-on、v-if、v-for等，用于属性绑定、事件处理、条件渲染和列表渲染。
• 插槽（Slots）：允许组件内容分发和自定义。
• 模板引用（ref）和指令修饰符：用于更精细地操作DOM或控制指令行为。

生命周期钩子

Vue 3 组件的生命周期分为选项式 API 钩子与组合式函数两种写法，对应关系：

选项式 API	组合式 API	时机
beforeCreate / created	setup() 本身	实例初始化，DOM 未挂载
beforeMount	onBeforeMount	首次渲染前
mounted	onMounted	DOM 挂载完成，可访问 DOM
beforeUpdate	onBeforeUpdate	响应式数据变化、DOM 更新前
updated	onUpdated	DOM 已更新
beforeUnmount	onBeforeUnmount	组件卸载前（清理定时器/订阅的位置）
unmounted	onUnmounted	组件已卸载

注意：Vue 2 的 beforeDestroy / destroyed 在 Vue 3 中已更名，beforeCreate / created 的逻辑应直接写在 setup() 里。

路由管理

• Vue Router：官方提供的路由库，用于构建单页应用（SPA）的页面导航。支持路由配置、路由守卫、动态路由、嵌套路由等功能。
  • Hash模式：URL中使用#符号标记路由，如http://example.com/#/about。
  • History模式：利用HTML5 History API实现无#的平滑路由，如http://example.com/about。

状态管理

• Pinia（官方推荐）：Vue 官方状态管理库，完整的 TypeScript 支持、DevTools 集成，去掉了 mutations（提交同步变更的样板层），直接在 actions 中写同步/异步逻辑。
• Vuex：上一代方案，已进入维护模式，仅建议在存量 Vue 2 项目中继续使用。

进阶特性与工具

• Composition API（Vue 3引入）：一种新的API组织方式，允许开发者以更灵活的方式编写逻辑，包括使用setup函数、Reactivity APIs（如ref、reactive、watch等）。
• Teleport：将组件的DOM输出移动到文档的其他位置。
• Suspense：用于异步加载组件及数据，并优雅地处理加载状态。
• Server-Side Rendering (SSR)：支持服务器端渲染，提高SEO友好性和首屏加载速度。
• TypeScript支持：Vue 3全面拥抱TypeScript，提供更好的类型检查和IDE支持。
• 测试：官方推荐 Vitest（单元测试）+ Vue Test Utils（组件测试）+ Playwright（端到端）。
• 构建与打包：create-vue（官方脚手架）+ Vite；Vue CLI 已停止维护，存量项目建议迁移。

周边生态与最佳实践

• Vue生态系统：丰富的第三方库和插件，如Element Plus、Vuetify、Nuxt.js（服务端渲染与静态站点生成）、Quasar（跨平台应用开发）等。
• 性能优化：懒加载、代码分割、缓存策略、避免过度渲染等技术。
• 组件设计原则：封装性、单一职责、可复用性、可维护性等指导原则。
• 项目结构与组织：模块划分、代码风格、约定优于配置等。

掌握以上知识体系，结合实际项目经验，开发者能够有效地运用Vue.js进行高效、健壮的前端开发工作，并应对各种场景下的需求和挑战。同时，持续关注Vue的官方文档、社区资源和版本更新，有助于保持知识的时效性和前沿性。