Vue 3

Vue 3 是渐进式 JavaScript 框架，用于构建用户界面。基于标准 HTML、CSS 和 JavaScript，提供声明式、组件化的编程模型。

官网：vuejs.org · 仓库：github.com/vuejs/core

速查卡片

项	内容
当前稳定版	3.5.x
下一版本	3.6（开发中，Vapor 模式）
发布日期	2020-09-18（3.0 GA）
构建工具	Vite（推荐）/ Webpack
TypeScript 支持	一等支持，源码由 TS 编写
包名	vue
Node 最低版本	≥ 18
许可	MIT
Vue 2 EOL	2023-12-31（已终止）

核心特性概览

组合式 API（Composition API）

基于函数的逻辑复用与组织方式，替代 Options API 的碎片化问题。核心：ref / reactive / computed / watch / watchEffect。

详见 响应式系统基础 · 组合式 API（待整理）

<script setup> 语法糖

编译时语法糖，在 SFC 中使用组合式 API 的更简洁方式。顶层绑定自动暴露给模板，无需 return。

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

详见 SFC 语法规范（待整理）

响应式系统（Reactivity）

基于 ES6 Proxy 的全新响应式引擎，替代 Vue 2 的 Object.defineProperty。支持 Map/Set、数组索引、动态属性增删，无死角追踪。

详见 响应式原理深度解析（待整理）

Teleport（传送门）

将组件 DOM 渲染到指定目标节点（如 body），突破父组件 overflow: hidden / z-index 的限制。

<Teleport to="body">
  <Modal />
</Teleport>

详见 Teleport（待整理）

Suspense（异步协调）

协调异步依赖（异步组件、async setup），提供加载中/完成/错误的统一处理。

<Suspense>
  <AsyncDashboard />
  <template #fallback>加载中...</template>
</Suspense>

详见 Suspense（待整理）

Fragment（多根节点）

组件模板允许多个根节点，不再强制单一包裹元素。

<template>
  <header>标题</header>
  <main>内容</main>
  <footer>底部</footer>
</template>

其他

特性	说明	文档
createApp	全新应用实例 API，替代 new Vue()	应用实例（待整理）
Emits 声明	组件显式声明 emits，类型安全	组件事件（待整理）
v-model 增强	多 v-model、自定义修饰符	组件 v-model（待整理）
异步组件	defineAsyncComponent + Suspense	异步组件（待整理）
Vapor Mode	3.6 实验性编译策略，无虚拟 DOM	Vapor Mode（待整理）

知识体系导航

响应式系统

主题	说明	文档
ref / reactive	响应式数据基础 API	响应式基础
computed	计算属性与缓存	计算属性
watch / watchEffect	侦听器	侦听器（待整理）
shallowRef / shallowReactive	浅层响应式	浅层响应式（待整理）
toRef / toRefs	解构保持响应式	Ref 工具函数（待整理）
effectScope	响应式作用域管理	EffectScope（待整理）
响应式原理	Proxy 引擎、依赖追踪、触发机制	响应式原理（待整理）

组合式 API

主题	说明	文档
setup()	组合式 API 入口	setup（待整理）
生命周期钩子	onMounted / onUpdated / onUnmounted 等	生命周期（待整理）
provide / inject	依赖注入	依赖注入（待整理）
Composables	组合式函数编写模式	Composables（待整理）
useTemplateRef	3.5 模板引用新方式	模板引用（待整理）

组件系统

主题	说明	文档
Props	属性声明、校验、默认值	Props（待整理）
Events / defineEmits	事件声明与触发	组件事件（待整理）
defineModel / v-model	双向绑定	组件 v-model（待整理）
Slots	默认插槽、具名插槽、作用域插槽	插槽（待整理）
defineExpose	暴露组件公开方法/属性	组件暴露（待整理）
异步组件 defineAsyncComponent	懒加载 + 加载状态	异步组件（待整理）
动态组件 <component :is>	运行时切换组件	动态组件（待整理）

模板语法

主题	说明	文档
插值与表达式	文本插值、JS 表达式	模板语法（待整理）
内置指令	v-if / v-show / v-for / v-bind / v-on / v-model / v-once / v-memo / v-cloak / v-pre / v-html / v-text	内置指令（待整理）
事件处理	@click、修饰符（.stop / .prevent / .once 等）	事件处理（待整理）
表单绑定	v-model 修饰符（.lazy / .number / .trim）	表单绑定（待整理）
自定义指令	指令钩子（created / mounted / updated 等）	自定义指令（待整理）

内置组件

组件	说明	文档
<Transition>	单元素/组件过渡动画	Transition（待整理）
<TransitionGroup>	列表过渡动画	TransitionGroup（待整理）
<KeepAlive>	缓存组件状态	KeepAlive（待整理）
<Teleport>	传送 DOM 到目标位置	Teleport（待整理）
<Suspense>	异步依赖协调	Suspense（待整理）

进阶与工程化

主题	说明	文档
渲染函数 / JSX	h() 函数、JSX 支持	渲染函数（待整理）
SSR / Nuxt	服务端渲染	SSR（待整理）
TypeScript 集成	类型推导、组件类型标注	TypeScript（待整理）
插件开发	app.use() 插件规范	插件（待整理）
性能优化	v-memo、shallowRef、defineAsyncComponent	性能优化（待整理）
响应式编译宏	defineProps / defineEmits / defineSlots / defineModel / defineOptions	编译宏（待整理）
Vapor Mode（实验）	无虚拟 DOM 编译策略	Vapor Mode（待整理）

快速上手

最小示例

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">
    Count: {{ count }}
  </button>
</template>

创建项目

pnpm create vue@latest          # 官方脚手架（基于 Vite）
# 或
pnpm create vite my-app --template vue-ts

应用挂载

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

Vue 2 → Vue 3 差异对比

Vue 2 用法	Vue 3 替代	说明
new Vue({ ... })	createApp({ ... }).mount('#app')	应用实例 API 替代构造函数
.sync 修饰符	v-model:propName	合并进 v-model，支持多个
$listeners	合并进 $attrs	$attrs 包含 class / style / 事件
v-on.keyCode（如 @keyup.13）	❌ 移除	仅支持 kebab-case 键名（如 @keyup.enter）
Filters 0	❌ 移除	用 computed / 方法替代
v-if / v-for 优先级	v-if > v-for（与 v2 相反）	不推荐同时使用
单根节点限制	✅ 支持多个根节点（Fragment）	无需包裹 <div>
Vue.extend()	❌ 移除	用 defineComponent
$on / $off / $once（事件总线）	❌ 移除	用 mitt 或 provide/inject
Vue.set / Vue.delete	❌ 移除	Proxy 响应式无需手动增删
render 函数参数	h 从全局导入	import { h } from 'vue'
transition class 名	v-enter → v-enter-from	class 命名调整
functional 组件	普通函数组件	无需 functional: true
v-bind.sync	v-model:prop	统一为 v-model 参数
<portal>	<Teleport>	内置组件替代第三方库

生态工具链

工具	说明	链接
Vite	下一代前端构建工具，Vue 官方推荐	vitejs.dev
Pinia	Vue 3 官方状态管理（替代 Vuex）	pinia.vuejs.org
Vue Router	官方路由	router.vuejs.org
VueUse	组合式工具函数集	vueuse.org
Nuxt	全栈 Vue 框架（SSR / SSG）	nuxt.com
Vitest	Vite 原生单元测试框架	vitest.dev
Vue DevTools	浏览器调试工具（支持 Vite 插件模式）	devtools.vuejs.org
Volar	VS Code 官方扩展（TypeScript + Vue 支持）	marketplace

常见误区

1. ❌ 直接用 Options API 就行 → Vue 3 中组合式 API 是主要推荐方式，TypeScript 推断更好、逻辑复用更自然。
2. ❌ reactive 比 ref 更好 → ref 可重新赋值且解包一致，实际开发中 ref 更通用。
3. ❌ 解构 reactive 仍保持响应式 → 必须用 toRefs() 包装，或直接用 ref。
4. ❌ Vue 3 不兼容 Vue 2 生态 → 多数库已有 Vue 3 版本；Options API 仍可用，迁移成本可控。
5. ❌ watchEffect 和 watch 一样 → watchEffect 自动追踪依赖，watch 需显式指定。懒执行 vs 立即执行是核心区别。
6. ❌ v-for 不需要 key → 仍然需要，且 key 绑定在 <template v-for> 上而非子元素。

版本信息

版本	发布日期	关键变化
3.0	2020-09-18	首个稳定版：Proxy 响应式、Composition API、Teleport、Suspense、Fragment
3.2	2021-08-09	<script setup> 稳定、v-memo、effectScope
3.3	2023-05-11	defineSlots、defineOptions、泛型组件、toRef / toValue 增强
3.4	2023-12-28	defineModel 稳定、v-bind 同名简写、响应式系统重构（性能提升）
3.5	2024-09-03	useTemplateRef、onWatcherCleanup、useId、响应式 Props 解构
3.6	开发中	Vapor Mode（无虚拟 DOM）、Suspense 稳定化

来源

来源	链接
官方文档	vuejs.org
源码仓库	github.com/vuejs/core
发布日志	vuejs.org/about/releases.html
迁移指南	v3-migration.vuejs.org

---

最后整理：2026-07-05 · 对应 Vue 版本：3.5.x