Vue

渐进式 JavaScript 框架 —— 用于构建用户界面的渐进式框架

官网：https://vuejs.org | 中文官网：https://cn.vuejs.org

发展历史

版本	时间	里程碑
Vue 0.6	2013.12	首次公开发布
Vue 1.0	2015.10	正式版发布，数据绑定 + 指令系统
Vue 2.0	2016.09	引入虚拟 DOM，支持服务端渲染（SSR），性能大幅提升
Vue 2.7	2022.07	最后一个 2.x 小版本，移植部分 Vue 3 特性
Vue 3.0	2020.09	Composition API、Proxy 响应式、TypeScript 原生支持、Tree-shaking
Vue 3.4	2023.12	模板编译优化（v-bind 单对象、解析速度提升）
Vue 3.5	2024.09	响应式重构优化、SSR 改进

作者

尤雨溪（Evan You） — 前 Google 工程师，在 Angular 项目工作期间萌生开发 Vue 的想法。2013 年首次发布 Vue，目前是全球最受欢迎的前端框架之一。

Vue 2 → Vue 3 迁移

Vue 3 带来了大量改进，迁移主要注意：

创建实例：new Vue() → createApp()
生命周期：beforeDestroy → beforeUnmount，destroyed → unmounted
全局 API：Vue.mixin() → app.mixin()，Vue.directive() → app.directive()
过滤器：过滤器已移除，推荐使用方法或计算属性替代
v-model：v-model 支持多个绑定和自定义修饰符
Vite 构建：官方推荐使用 Vite 替代 Webpack

核心特性

渐进式框架

Vue 的设计理念是渐进式——可以从一个简单的 CDN 脚本开始，逐步扩展为完整的工程化项目：

CDN 引入 → 单文件组件 → 路由（Vue Router）→ 状态管理（Pinia）→ 构建工具（Vite）→ SSR（Nuxt）

响应式系统

Vue 3 使用 Proxy 实现响应式，相比 Vue 2 的 Object.defineProperty：

支持数组索引和长度变化
支持属性动态添加和删除
无需 Vue.set() / Vue.delete()
性能更好，初始化更快

javascript

import { ref, reactive, computed, watch } from 'vue'

const count = ref(0)
const state = reactive({ name: 'Vue', version: 3 })

const doubled = computed(() => count.value * 2)

watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`)
})

组件化

Vue 采用单文件组件（SFC） 格式：

vue

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">点击次数: {{ count }}</button>
</template>

<style scoped>
button { color: #42b883; }
</style>

声明式渲染

简洁的模板语法，直观声明 UI 与数据的绑定关系：

vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p v-if="visible">条件渲染</p>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <input v-model="search" placeholder="双向绑定" />
  </div>
</template>

Composition API

Vue 3 引入 Composition API，解决了 Options API 在大型组件中的逻辑复用和代码组织问题：

javascript

// useCounter.js — 可复用的逻辑单元
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)

  function increment() { count.value++ }
  function decrement() { count.value-- }

  return { count, double, increment, decrement }
}

虚拟 DOM

Vue 使用虚拟 DOM 提高渲染性能，Vue 3 的编译优化包括：

PatchFlag — 标记动态节点，跳过静态内容对比
静态提升 — 静态节点只创建一次，后续复用
事件缓存 — 缓存事件处理函数引用
Tree-shaking — 未使用的特性不打包

生态系统

官方库

库	说明	适用版本
Vue Router	官方路由管理，支持嵌套路由、导航守卫、动态路由	Vue 3
Pinia	官方状态管理，替代 Vuex，TypeScript 原生支持，支持 devtools 和 HMR	Vue 3
Vite	下一代构建工具，基于 ES Module，开发服务器秒启动	Vue 3
Vue Test Utils	官方单元测试工具库	Vue 3
Vue DevTools	浏览器调试工具，组件树 / 状态 / 性能	Vue 3

UI 组件库

库	说明	风格
Element Plus	Vue 3 版 Element UI，桌面端企业级组件库	简洁商务
Naive UI	TypeScript 原生，主题系统灵活，组件丰富	现代化
Ant Design Vue	Ant Design 的 Vue 实现	企业级
Vuetify	Material Design 风格，组件齐全	Material Design
PrimeVue	开源组件库，支持 Material / Bootstrap / 自定义主题	多主题
Varlet	Mobile-first 组件库，适合移动端 H5	Material Design
Vant	有赞开源移动端组件库，轻量高效	移动端
Quasar	一套代码构建 Web / PWA / 移动 App / 桌面 App	全平台

常用插件与库

类别	推荐
HTTP 请求	Axios
表单验证	VeeValidate / Zod
动画	VueUse Motion / GSAP
图标	Iconify / unplugin-icons
富文本编辑器	Tiptap / Quill
国际化	Vue I18n
数据可视化	ECharts / Chart.js
拖拽	VueDraggablePlus
工具函数	VueUse — 200+ 组合式 API 工具集

VueUse

VueUse 是 Vue 生态中最受欢迎的工具库，提供 200+ 组合式 API：

javascript

import { useMouse, useStorage, useDebounce, useIntersectionObserver } from '@vueuse/core'

// 鼠标位置追踪
const { x, y } = useMouse()

// 响应式本地存储
const theme = useStorage('theme', 'dark')

// 防抖
const search = ref('')
const debouncedSearch = useDebounce(search, 300)

// 可见性观察
const target = ref(null)
const targetIsVisible = ref(false)
useIntersectionObserver(target, ([{ isIntersecting }]) => {
  targetIsVisible.value = isIntersecting
})

常用模式

组合式函数（Composables）

Vue 3 推荐使用组合式函数抽离可复用逻辑：

javascript

// useFetch.js
import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (e) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  })

  return { data, error, loading }
}

Provide / Inject

跨层级组件通信，避免 prop drilling：

javascript

// 祖先组件
import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)

// 后代组件
import { inject } from 'vue'
const theme = inject('theme', 'light') // 第二个参数为默认值

动态组件

vue

<component :is="currentComponent" />

应用场景

单页应用（SPA）

Vue + Vue Router + Pinia + Vite，构建完整的单页应用。

服务端渲染（SSR）

使用 Nuxt 框架实现：

首屏加载优化
SEO 友好
静态站点生成（SSG）
增量静态生成（ISR）

微前端

Vue 支持作为微前端子应用，使用 wujie、qiankun 或 Module Federation 集成。

移动端 H5

Vant / Varlet 等移动端组件库，配合 Vite 构建移动端页面。

桌面应用

Electron + Vue 构建跨平台桌面应用：

electron-vite — 专为 Electron 设计的 Vite 构建工具
Tauri + Vue — 更轻量的桌面应用方案

小程序

uni-app 使用 Vue 语法开发微信/支付宝/百度等多端小程序。

开发工具

脚手架

bash

# 使用 Vite 创建 Vue 项目（推荐）
npm create vue@latest

# 使用 Nuxt 创建 SSR 项目
npx nuxi init my-nuxt-app

# 使用 create-vue（官方脚手架）
npm create vue@latest my-vue-app

IDE 支持

VSCode — 安装 Vue - Official 插件（原 Volar）
WebStorm — 内置 Vue 支持

调试

Vue DevTools — 浏览器扩展，查看组件树、状态、事件
vite-plugin-vue-inspector — 点击页面元素跳转到编辑器源码

对比其他框架

维度	Vue	React	Angular
学习曲线	平缓	中等	陡峭
模板语法	HTML 模板	JSX	HTML 模板
响应式	Proxy（自动追踪）	Hooks（手动管理）	Zone.js（自动）
构建工具	Vite（官方）	Vite / Next	Angular CLI
SSR	Nuxt	Next.js / Remix	Angular Universal
TypeScript	良好支持	良好支持	原生支持
包体积	小（Tree-shakable）	中等	较大
企业级	适用	适用	强项

最佳实践

项目结构推荐

src/
├── assets/            # 静态资源
├── components/        # 公共组件
│   ├── common/        # 通用组件
│   └── business/      # 业务组件
├── composables/       # 组合式函数
├── layouts/           # 布局组件
├── pages/             # 页面组件
├── router/            # 路由配置
├── stores/            # Pinia 状态
├── utils/             # 工具函数
└── types/             # TypeScript 类型

编码规范

组件名使用 PascalCase（MyComponent.vue）
模板中使用 kebab-case 引用组件（<my-component />）
Composables 使用 use 前缀（useAuth）
常量枚举使用全大写下划线分隔
props 定义使用对象语法并声明类型
使用 <script setup> 组合式 API

性能优化

使用 v-memo 优化大列表渲染
使用 shallowRef / shallowReactive 减少深层响应式开销
合理使用 computed 缓存计算结果
虚拟滚动（如 vue-virtual-scroller）处理长列表
异步组件 defineAsyncComponent 拆分代码
使用 keep-alive 缓存组件状态

学习资源

Vue 官方文档 — 最权威的学习资料
Vue Mastery — 官方推荐的视频教程
Vue School — 深入 Vue 生态教程
Nuxt 文档 — 全栈 Vue 框架
VueUse — 组合式 API 工具集
Vue.js Examples — 社区示例集合

Vue ​

发展历史 ​

作者 ​

Vue 2 → Vue 3 迁移 ​

核心特性 ​

渐进式框架 ​

响应式系统 ​

组件化 ​

声明式渲染 ​

Composition API ​

虚拟 DOM ​

生态系统 ​

官方库 ​

UI 组件库 ​

常用插件与库 ​

VueUse ​

常用模式 ​

组合式函数（Composables） ​

Provide / Inject ​

动态组件 ​

应用场景 ​

单页应用（SPA） ​

服务端渲染（SSR） ​

微前端 ​

移动端 H5 ​

桌面应用 ​

小程序 ​

开发工具 ​

脚手架 ​

IDE 支持 ​

调试 ​

对比其他框架 ​

最佳实践 ​

项目结构推荐 ​

编码规范 ​

性能优化 ​

学习资源 ​

Vue

发展历史

作者

Vue 2 → Vue 3 迁移

核心特性

渐进式框架

响应式系统

组件化

声明式渲染

Composition API

虚拟 DOM

生态系统

官方库

UI 组件库

常用插件与库

VueUse

常用模式

组合式函数（Composables）

Provide / Inject

动态组件

应用场景

单页应用（SPA）

服务端渲染（SSR）

微前端

移动端 H5

桌面应用

小程序

开发工具

脚手架

IDE 支持

调试

对比其他框架

最佳实践

项目结构推荐

编码规范

性能优化

学习资源