概述
Vue.js 由尤雨溪（Evan You）于 2014 年首次发布，是目前全球最受欢迎的三大前端框架之一。Vue 倡导"渐进式"设计理念——你可以只用它的响应式视图层，也可以搭配路由、状态管理、SSR 等官方工具构建大型单页应用（SPA）。中文社区活跃度高，文档翻译完善。
核心特性
✓
声明式渲染：模板语法让 DOM 始终与数据保持同步。
✓
响应式系统：基于 Proxy（Vue3）自动追踪依赖变化。
✓
组件化：将 UI 拆分为独立复用的单元，每个组件含 Template + Script + Style。
✓
虚拟 DOM：Diff 算法最小化实际 DOM 操作，提升更新性能。
✓
TypeScript 友好：Vue3 源码完全采用 TS 重写。
✓
Composition API：逻辑复用更清晰，适合复杂组件。
Hello World
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello, Vue!')
</script>
响应式原理对比
| 维度 | Vue 2 | Vue 3 |
|---|---|---|
| 检测方式 | Object.defineProperty | Proxy |
| 数组索引 | 无法直接监听 | 原生支持 |
| 属性增删 | 需 Vue.set/Vue.delete | 直接赋值即可 |
| 初始化成本 | 递归遍历全部属性 | 惰性拦截，按需创建 |
| 打包体积 | ~33KB gzipped | ~13KB gzipped（Tree-shaking） |
官方全家桶与生态系统
- Vue Router — 声明式路由管理，支持嵌套路由、导航守卫
- Pinia — 新一代状态管理库，取代 Vuex，API 更简洁
- Vite — 基于 ESM 实现毫秒级 HMR 的下一代构建工具
- Nuxt — SSR / SSG 框架，一键生成服务端渲染应用
- Vitest — 基于 Vite 的原生单元测试框架
- Element Plus / Ant Design Vue / Vuetify — 主流 UI 组件库
生命周期钩子
onBeforeMount— 挂载前，DOM 尚未创建onMounted— 挂载完成，可访问真实 DOM，常在此发起异步请求onBeforeUpdate— 数据变化导致重新渲染之前onUpdated— 重新渲染完成后onBeforeUnmount— 卸载前，清理定时器 / 事件监听onUnmounted— 彻底销毁，清除副作用
适用场景
Vue 非常适合内容管理系统、中后台仪表盘、电商前台、数据可视化大屏以及需要快速迭代的 SPA。其学习曲线平缓，开发者可以从小模块逐步引入；当业务复杂时再用 Pinia、Nuxt 等工具增强能力。TypeScript 的全面支持和 Vite 的极速构建体验使其在 2026 年仍是最受开发者欢迎的前端方案之一。