Vue 入门介绍：发展、特点、缺点与上手

版本基线：当前稳定版 Vue 3.5.45；Vue 3.6 仍是 RC（3.6.0-rc.14）；Vue 4.0 未发布；Vite 8.3.6 已稳定；Vue 2 已于 2023-12-31 停止维护。本文代码全部基于 3.5 稳定线。

本文依据：版本与 API 结论只取自 Vue 官网、官方博客、npm dist-tags 与 GitHub Releases；文中提到的工具、组件库、跨端方案均为官方项目或社区真实在用的项目，出处集中在文末「依据与社区实践」。没有官方或社区实践支撑的判断不写入正文。

适合谁读：前端初学者、从 React / Angular 转 Vue 的开发者、做技术选型的团队。前置知识：HTML / CSS / JavaScript（ES6+）、npm 基本使用。

Tags：Vue Vue3 前端入门 Composition API Vite Pinia SFC TypeScript

---

一、发展背景

Vue 由尤雨溪于 2014 年首次公开发布，从「轻量视图层」逐步演进为「渐进式框架」，再到编译器与运行时深度协同。以下是具体节点：

时间	事件
2014-02	首次公开发布，一个 <script> 标签即可使用
2015-10	Vue 1.0：响应式 + 模板 + 指令体系成型
2016-09-30	Vue 2.0：引入虚拟 DOM、SSR；vue-router / vuex / vue-cli 生态成型
2020-09-18	Vue 3.0：Proxy 响应式、Composition API、TS 重写、Fragments / Teleport / Suspense
2022-02-07	Vue 3 成为 npm 默认版本（vue@latest）
2023-12-31	Vue 2 EOL，最终版 2.7.16
2024-09-01	Vue 3.5：响应式 props 解构转正、useTemplateRef() / useId()
2026-07-18	Vue 3.6 进入 RC（首个 rc.1），Vapor Mode 功能完成
2026-11-05	v3.5.45，当前最新稳定版

几个容易记混的版本归属：defineOptions / defineSlots 稳定于 3.3；defineModel、v-bind 同名简写稳定于 3.4；响应式 props 解构默认启用、useTemplateRef() / useId() 稳定于 3.5。

另需分清两条独立版本线：Vite 8 首发于 2026-03-12、当前 8.3.6，与 Vue 3.6 是否发布无关；Vue 4.0 未发布，npm 无任何 4.x dist-tag、GitHub Releases 无任何 4.0.x 记录。本文只写官方数据能证实的部分，不引用大会转述或媒体排期。

---

二、核心特点

1. 渐进式：内部拆成 compiler / runtime-dom / reactivity / server-renderer 等解耦模块，既能用 CDN 给传统页面加一点交互，也能用 create-vue 撑起数百组件的 SPA。
2. Proxy 响应式：ref() / reactive() / computed() / watch() 自动收集依赖，无需手写依赖数组。ref 的 .value 来自 getter / setter 的依赖追踪；computed 惰性求值并缓存。官方原句 “the recommended way to declare reactive state is using the ref() function”。
3. 单文件组件 SFC：.vue = <script setup> + <template> + <style scoped>，需编译；编译期做 Cache Static（静态提升）、Patch Flags（补丁标记，位运算跳过无关检查）、Tree Flattening（树扁平化），官方称之为 Compiler-Informed Virtual DOM。
4. 双 API 并存：官方 FAQ 对 “Will Options API be deprecated?” 的答复是 “No, we do not have any plan to do so”；Composition API 适合逻辑复用、大型组件与 TS，且 setup() 只执行一次，无 stale closure、无调用顺序限制。官方只建议在整合存量代码时混用。
5. 模板为默认路径，JSX / TSX 也官方支持：官方解释是模板 “easier to statically analyze”，因此能做编译期优化；高度动态场景才下沉到渲染函数。
6. 官方生态齐全：create-vue + Vite（脚手架 / 构建）、Vue Router（路由）、Pinia（状态管理）、Vue DevTools（调试）、Vue - Official（VS Code 扩展，官方明确 “replaces Vetur”）、Nuxt（SSR / 全栈）、vue-tsc（类型检查）。Vue CLI 官网横幅为 “Vue CLI is in Maintenance Mode!”。
7. TypeScript 一等公民：官方原句 “Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations”；Vite 只做转译不做类型检查，命令行类型检查用 vue-tsc。
8. 性能与体积：3.5 响应式重构内存降低约 56%（官方 3.5 公告）。Vapor Mode 是随 3.6 RC 提供的可选编译模式（<script setup vapor>，官方称 “100% opt-in”），跳过 VNode 与 diff；但官方同时写明 “Do not use pre-releases in production”，因此它不是稳定版能力，更不是默认渲染模式。

---

社区真实在用的技术栈

以下均为可点开核验的官方项目或社区项目，不是示例占位名；出处为 vuejs/awesome-vue（由 vuejs 官方组织维护的社区清单，本次核验时最近提交为 2026-11-03）与项目官网。

场景	真实项目	依据
脚手架 / 构建	create-vue + Vite	create-vue README：“The recommended way to start a Vite-powered Vue project”
路由 / 状态	Vue Router / Pinia	官方状态管理页：Pinia “is maintained by the Vue core team”
SSR / 全栈	Nuxt	官方 SSR 指南：“we highly recommend using Vue frameworks if you need SSR”；awesome-vue 的 SSR 章节亦收录 Nuxt
PC 组件库	Element Plus、Naive UI、Vuetify	Element Plus 官网 自述 “A Vue 3 based component library”；Naive UI / Vuetify 收录于 awesome-vue
中后台模板	vue-vben-admin、Soybean Admin、Geeker-Admin 等	awesome-vue “Admin Template” 章节
移动 / 多端	uni-app、Ionic、Vant、NutUI、Framework7-Vue	awesome-vue “Frameworks > Mobile” 章节；均为社区方案，非 Vue 官方一等能力
组合式工具库	VueUse	官方 Composition API FAQ 原文点名的社区项目（“impressive community projects such as VueUse”）
文档 / 静态站	VitePress、VuePress	awesome-vue 收录
真实产品与开源项目	Wiki.js、NocoDB、Slidev、YesPlayMusic、Habitica、9GAG；企业清单含 GitLab、Adobe、Alibaba、Xiaomi、Nintendo、Upwork 等	awesome-vue 的 “Projects Using Vue.js” / “Enterprise Usage” 章节

两点边界必须说清：① awesome-vue 是社区贡献清单，「被收录」不等于「该产品全站使用 Vue」，只用于说明生态真实存在；② 3.6 / Vapor Mode 处于 RC，官方禁止用于生产，目前没有生产级社区落地；Vue 4.0 未发布，同样不存在社区应用。本文不把 RC 特性写成已被采用的稳定能力。

---

三、缺点与适用边界

只列能对应到官方文档或社区实践现状的取舍，不写「不支持 TS」「性能差」「只适合小项目」这类与官方口径相悖的论断。

缺点	具体表现	缓解思路
跨端与部分依赖靠社区	官方 SSR 指南只推荐 Nuxt；uni-app、Ionic、Vant 等移动/跨端方案均为社区维护，不是官方一等能力	选型前核对必须依赖的组件库 / 跨端方案是否有 Vue 3 版本，对照第二节「社区真实在用的技术栈」清单
灵活度过高	官方 FAQ 承认 Composition API “no longer provides the ‘guard rails’”，大项目组织方式靠团队约定	统一 composables/ 目录、useXxx 命名，跨组件状态收敛到 Pinia
响应式心智负担	.value、reactive() 的「不能整体替换 / 不便解构 / 只支持对象类型」三条限制、模板自动解包仅限顶层属性	默认用 ref()；解构用 toRefs()；CI 跑 vue-tsc --noEmit
SFC 依赖构建链	.vue 需 @vitejs/plugin-vue 编译，IDE 需 Vue - Official	用 npm create vue@latest 生成完整配置；纯 HTML 场景回到 CDN 全局构建
迁移成本	Vue 2 → 3 有破坏性变更，老库（Vuetify 2、router/vuex 3）需配套升级	升到 2.7.16 → @vue/compat 逐条消警 → 按官方迁移指南替换被移除 API
生产级 SSR 需额外方案	官方明说要协调客户端/服务端两套构建、路由、数据预取	SSR / 全栈用 Nuxt；小程序 / 多端用 uni-app 等社区方案
社区资料版本混杂	辟谣表里的 Vue 2 旧教程、vue@next、Vuex、Vetur、vue-cli 仍在传播	认准 vuejs.org / cn.vuejs.org；版本用 npm view vue dist-tags --json 自查

本节出现的 npm create vue@latest、vue-tsc --noEmit、npm view vue dist-tags --json，完整作用与执行位置见 4.1「命令速查表」。

---

四、入门实战

4.1 环境与建项

Node.js 22.18+ / 24.12+ / 26.x（均为 LTS，推荐 24 或 26；20 已 EOL）——这是 create-vue@3.24.0 的 engines 字段 ^22.18.0 || >=24.12.0 与 Vite 文档 的要求，再对照 Node.js Release 表。VS Code 装 Vue - Official 并禁用 Vetur（官方 TS 文档明确要求）。

命令在哪里执行、作用是什么：create-vue README 原句是 “run the following command in your terminal”——全部在本机终端（Windows 用 VS Code 内置终端的 PowerShell 或 Git Bash，macOS / Linux 用系统终端），不是浏览器控制台、不是 Node.js REPL、也不是 IDE 的「运行」按钮。下表是本文出现的全部命令；后文再遇到同一条命令，作用与执行位置一律以此表为准：

命令	作用	执行位置
node -v	打印当前 Node.js 版本，确认满足 22.18+ / 24.12+ / 26.x	任意目录
npm create vue@latest	调用官方脚手架 create-vue，交互式生成 Vue 3 + Vite 工程（package.json、index.html、src/）	父目录（如 D:\dev、~/code），会新建 vue-todo/ 子目录
npm create vue@latest -- --help	列出脚手架全部特性开关（--typescript / --router / --bare 等），只显示帮助、不创建项目	任意目录
npm create vue@latest '--' --help	同上；PowerShell 必须给 -- 加引号才能正确转发	任意目录
cd vue-todo	把终端当前目录切进项目根目录，之后才能读到 package.json	父目录
npm install	按 package.json 把依赖装进 node_modules/ 并生成 / 更新锁文件；只需装一次	项目根目录 vue-todo/
npm run dev	执行 package.json 里的 dev 脚本（Vite 项目中即 vite），启动开发服务器、监听文件变更并热更新	项目根目录 vue-todo/
npm list vue vite	打印本机实际装上的 vue / vite 版本，核对与本文基线是否一致	项目根目录 vue-todo/
npm view vue dist-tags --json	从 npm registry 读取 vue 的 latest / rc 等标签，自查本文版本结论是否仍成立	任意目录
vue-tsc --noEmit	对 .vue / .ts 做类型检查但不产出文件，适合放在 CI	项目根目录 vue-todo/
npm install && npm run dev	顺序执行：先装依赖、成功后才启动 dev server（&& 表示前者成功才执行后者）	项目根目录 vue-todo/
Ctrl+C	向前台进程发中断信号，停止正在运行的 dev server	跑着 npm run dev 的那个终端

几个位置约束有官方依据：npm create vue@latest 默认建子目录，Vite 文档 说明只有把项目名写成 . 才在当前目录生成；Vite 文档另写 “Running vite starts the dev server using the current working directory as root”，所以 npm run dev 在错误目录会找不到 index.html；npm run-script 文档 也写明脚本 “are run from the root of the package folder”。

# ① 父目录：调用脚手架建工程，交互式 Project name 填 vue-todo，第一遍选项全选 No
# @latest 不可省略，否则可能命中 npm 缓存里的旧版脚手架（create-vue README 原文）
npm create vue@latest

# ② 项目根目录：cd 切目录 → install 装依赖 → run dev 起开发服务器
cd vue-todo
npm install
npm run dev        # 前台常驻进程，勿关终端；浏览器打开 http://localhost:5173

npm run dev 会一直占用当前终端，按 Ctrl+C 停止；要继续执行别的 npm 命令请另开一个终端标签并同样 cd 到项目根目录。改代码保存后由 Vite 的 HMR 自动刷新，无需重启（Vite Features）。

-- --help 里的 -- 用于把参数转发给 create-vue（npm-init 文档）。注意脚手架生成的 package.json 里是 semver 范围依赖，实际装到哪个 patch 由 npm view vue dist-tags --json 决定，别把本文的精确版本号当成写死的值。表中各命令的作用定义均取自官方 CLI 文档，链接集中在文末「命令定义」一行。

典型目录：index.html（Vite 入口，在根目录）、vite.config.js、src/main.js、src/App.vue、src/components/、src/assets/。

4.2 最小单文件组件

<!-- src/components/HelloVue.vue -->
<script setup>
import { ref } from 'vue'

// <script setup> 顶层变量自动暴露给模板，无需 return
const count = ref(0)
</script>

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

<style scoped>
button { padding: 6px 14px; }
</style>

<script setup> 是编译期语法糖（官方 SFC 语法说明）；defineProps / defineEmits / defineModel 是编译器宏，无需 import。这里没有 this（不代表 Options API 的 this 被移除）。

4.3 常用模板语法

写法	作用
{{ title }}	文本插值
:href="url" / @click="fn"	v-bind / v-on 简写
v-if / v-else / v-for="x in list" :key="x.id"	条件与列表；:key 用稳定业务 id
v-model.trim="keyword"	双向绑定 + 修饰符
@submit.prevent / @click.once	事件修饰符
:id :title（3.4+）	v-bind 同名简写，等价于 :id="id" :title="title"

不要把 v-if 与 v-for 写在同一元素上；.native 修饰符在 Vue 3 已移除。以上均见 模板语法 与 迁移指南。

4.4 响应式与组件通信

<script setup>
import { ref, reactive, computed, watch, toRefs } from 'vue'

const count = ref(0)                                  // JS 内用 .value，模板里自动解包
const double = computed(() => count.value * 2)        // 惰性 + 缓存
const state = reactive({ name: 'Vue' })
const { name } = toRefs(state)                       // 解构保持响应性

watch(count, (n, o) => console.log(o, '->', n))
const list = ref([{ id: 1 }])
watch(list, () => console.log('列表变化'), { deep: true }) // 数组内部变更需显式 deep
</script>

<template>
  <!-- 顶层 ref 在模板里自动解包，不需要 .value -->
  <p>{{ count }} / {{ double }} / {{ name }}</p>
  <button @click="count++">+1</button>
</template>

官方 watch() API 定义 deep?: boolean | number // default: false，并写明 “When directly watching a reactive object, the watcher is automatically in deep mode”；Watchers 指南 写明 “watch is shallow by default”。deep: true 在 3.5+ 仍是官方标准写法、未弃用，3.5+ 新增的数字级 deep 只是可选能力（deep: 1 见 Vue 2→3 Watch on Arrays 迁移背景，不是 Composition API 的一手依据）。

组件通信用 defineProps({ label: String }) 接收、defineEmits(['submit']) 抛出、defineModel() 实现 v-model（官方组件 v-model 文档：“Starting in Vue 3.4, the recommended approach … is using the defineModel() macro”，展开为 modelValue prop + update:modelValue 事件，仍是单向数据流），插槽用 <slot name="hint"> / <template #hint>。

生命周期对照：mounted → onMounted、beforeDestroy → onBeforeUnmount、destroyed → onUnmounted；DOM 操作与订阅放 onMounted，清理放 onUnmounted（生命周期 API）。

4.5 完整示例：Todo List

在编辑器里用下面的内容整体替换 src/App.vue 并保存——文件路径是项目根目录 vue-todo/ 下的 src/，不是父目录；无需额外依赖。若 4.1 的 npm run dev 仍在运行，保存后 Vite 会自动热更新，不必重跑命令；否则在项目根目录的终端执行 npm install && npm run dev（作用见 4.1 速查表）。

<!-- src/App.vue -->
<script setup>
import { ref, computed } from 'vue'

let nextId = 3
const newTodo = ref('')
const todos = ref([
  { id: 1, text: '搭好 Vue 3 工程', done: true },
  { id: 2, text: '写一个 Todo List', done: false }
])

const total = computed(() => todos.value.length)
const remaining = computed(() => todos.value.filter(t => !t.done).length)

function addTodo() {
  const text = newTodo.value.trim()
  if (!text) return
  todos.value.push({ id: nextId++, text, done: false })
  newTodo.value = ''
}
function removeTodo(id) {
  todos.value = todos.value.filter(t => t.id !== id)
}
</script>

<template>
  <main class="app">
    <h1>Vue 3 Todo</h1>
    <form @submit.prevent="addTodo">
      <input v-model.trim="newTodo" placeholder="输入待办后回车" />
      <button type="submit" :disabled="!newTodo">添加</button>
    </form>
    <p>共 {{ total }} 项 · 未完成 {{ remaining }} 项</p>
    <ul v-if="todos.length">
      <li v-for="todo in todos" :key="todo.id" :class="{ done: todo.done }">
        <input type="checkbox" v-model="todo.done" />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
    <p v-else>还没有待办，先添加一条吧</p>
  </main>
</template>

<style scoped>
.app { max-width: 480px; margin: 48px auto; font-family: system-ui, sans-serif; }
form { display: flex; gap: 8px; }
input:not([type]) { flex: 1; padding: 8px 10px; }
li { display: flex; align-items: center; gap: 10px; }
li span { flex: 1; }
li.done span { text-decoration: line-through; color: #999; }
</style>

要点：模板里顶层 ref 自动解包，写 todos.length 而非 todos.value.length；nextId 不参与渲染，用普通变量即可；v-if 放 <ul>、v-for 放 <li>，不写在同一元素。写法与官方 State Management 页的 <script setup> 示例、Composition API FAQ 示例 一致。

下一步：Vue Router → Pinia → Vue DevTools → 需要 SSR 再上 Nuxt。官方入口：教程（中文）、交互式教程、在线演练场。

---

五、常见过时 / 错误信息纠偏

以下逐条以 Vue 官网、官方博客、npm dist-tags 与 GitHub Releases 核验（2026-11-09）。

错误说法	正确说法
Vue 2 还在维护，可以直接学 Vue 2	Vue 2 已于 2023-12-31 EOL，最终版 2.7.16；新项目一律 Vue 3
Vue 3 必须用 Composition API，Options API 已废弃	官方 FAQ：“No, we do not have any plan to do so”，Options API 未被废弃
Vue 不支持 TypeScript	官方：“first-class TypeScript support”，所有官方包自带类型声明，模板表达式也受类型检查
Vue 3 状态管理必须用 Vuex	官方：“Vuex is now in maintenance mode … It is recommended to use Pinia for new applications”
Vue 3 只能用 Vite；vue-cli 仍是官方推荐	官方推荐 create-vue + Vite（不是「只能」，webpack + vue-loader 仍可用）；Vue CLI 官网横幅 “in Maintenance Mode!”
reactive 解构后仍响应式 / 模板里 ref 也要 .value	官方列出 reactive() “Not destructure-friendly”；模板顶层 ref 自动解包，JS 里才需要 .value，且自动解包仅限顶层属性
Vue 3 移除了 Options API 的 this	只有 <script setup> 里没有 this；官方 TS 文档仍用 defineComponent() 推导 Options API 的 this
2026 年 Vue 3.6 已正式发布 / Vue 4.0 已发布	官网：“The current latest stable version of Vue is v3.5.45”；3.6 仍是 RC（3.6.0-rc.14，prerelease=true）；Vue 4.0 无 4.x tag、未发布。2026-07-18 发布的是首个 RC（rc.1 原句 “now entering the RC phase”），不是 GA；Vite 8 已稳定但首发是 2026-03-12
Vue 不支持 JSX / 不能做 SSR	官方 TS 文档写明支持 JSX / TSX；SSR 有 createSSRApp + vue/server-renderer，官方并推荐 Nuxt
「Vue 性能差」「只适合小项目」	与官方口径相悖：Vue 3 有 Compiler-Informed VDOM；FAQ 说明 Composition API 的目标是大规模项目，且 awesome-vue 收录大量企业与开源真实项目，不予采信

区分「真被移除」与「纯谣言」：Vue 2 → 3 确实移除了 filters、$children、$on/$off/$once（事件总线）、propsData、$destroy、$set / $delete、keyCode 修饰符、inline-template、.native；$listeners 并入 $attrs、$scopedSlots 并入 $slots；destroyed → unmounted、beforeDestroy → beforeUnmount。事件总线改用 mitt / tiny-emitter 或 props/emit、provide/inject、Pinia。而「Options API 废弃」「不支持 TS / JSX / SSR」「Vuex 必用」「仍需 vue@next」都是谣言。

---

六、总结

Vue 3 以「渐进式 + 编译期优化 + 双 API 并存 + 一等 TS 支持」换来低门槛与可伸缩性；代价是响应式心智负担、SFC 构建链依赖与团队规范成本。适合希望快速交付又需要长期可维护的团队；若强依赖某只有 React 版本的组件库或跨端方案，则是硬约束（对照第二节「社区真实在用的技术栈」清单核对）。

上手顺序（每条命令的作用与执行位置见 4.1 速查表）：node -v → npm create vue@latest → 跑通 Todo → ref / computed / watch → 组件通信 → Router / Pinia / DevTools / Nuxt。生产依赖锁定稳定线（如 ^3.5.45），不要跟随 rc 标签（官方：“Do not use pre-releases in production”）。