Vue 是什么

这一课你将能做到

1. 用自己的话说明 Vue「渐进式」与「UI = f(state)」是什么意思
2. 对照 React 核心 说出模板 / 响应式 / 组合式 API 的对应关系
3. 明确：本站 platform 用 React+Next，Vue 服务 frontend 路线图与常见国内岗位场景

为什么要学

学完 JavaScript 核心 后，你已能手改 DOM。项目一大，手写同步同样会乱。
Vue 3 与 React 一样走声明式 UI：你改的是数据，框架更新界面。差别主要在模板语法与生态习惯。

人话：Vue 是渐进式前端框架——既可以一小块增强页面，也可以撑起完整 SPA。CodeRoadMap 主站用 React；学会 Vue 是为了读懂大量后台与路线图节点，并完成概念迁移。

先建立图像

数据（ref/reactive）变化
        ↓
  模板重新求值
        ↓
  补丁更新真实 DOM

	Vue 3	React（本站）
界面写法	HTML 模板 + 指令	JSX
状态	ref / reactive	useState
复用逻辑	Composables	Custom Hooks
路由	Vue Router	Next App Router / React Router
全局状态	Pinia	多为局部 state / Context

跟着做

步骤 1：打开中文官方文档

打开 cn.vuejs.org，阅读首页对「渐进式框架」的说明。
权威以官网为准；本课正文用本站例子，不克隆竞品教程。

步骤 2：对照一段「清单」思路

原生 JS：改数组 → 清空 <ul> → 再创建 <li>。
Vue（预告）：

<script setup>
import { ref } from "vue";
const tracks = ref([
  { id: 1, title: "Vue 3 核心" },
  { id: 2, title: "React 核心" },
]);
</script>

<template>
  <ul>
    <li v-for="t in tracks" :key="t.id">{{ t.title }}</li>
  </ul>
</template>

先记住：改 tracks，列表跟着变；不必手写 DOM 差分。

步骤 3：在笔记里画对照表

写三行迁移笔记：

1. ref(x) ≈ 一个会变的值（取值常 .value）
2. v-for ≈ array.map 出列表
3. SFC 的 <template> ≈ 函数组件的 return (…)

步骤 4：认清本站分工

打开仓库 platform/：看到的是 React/Next，不是 Vue。
同时打开 /roadmaps/frontend 找到 Vue 节点——学 Vue track 是为路线图与就业面，不是替换本站主栈。

步骤 5：扫一眼生态层

层	常见选型
框架	Vue 3
构建	Vite
路由	Vue Router
状态	Pinia
UI	Element Plus 等

下一课起用 Vite 真正跑起来。

步骤 6：用一句话记数据流

状态变了 → 组件渲染函数/模板再计算 → 虚拟结果 → 更新 DOM

与 React 课同一思想，换一套 API 皮肤。

讲清楚要点

1. Vue 不取消 HTML/CSS/JS：标签、事件、异步你仍要会。
2. 声明式优先：少在 Vue 里到处 querySelector 抢控制权。
3. 渐进式：可以 CDN 小用，也可以工程化大用；本课走工程化主路径。
4. Vue 3 默认组合式 API（<script setup>）：别把课堂当 Vue 2 Options 速成。
5. 与 React 概念高度重叠：学会迁移比站队更重要。
6. 本站实战仍归 Next：Vue 练会后，主产品代码回 React track。

你可能会懵的地方

• 库还是框架？
  Vue 自称渐进式框架；核心仍是 UI。配套路由/状态是官方生态。

• 和 React 哪个好？
  都能做产品。本站主栈 React；Vue 在国内中后台很常见。面试说清共同点即可。

• 一定要 TypeScript 吗？
  create-vue 可勾选；本 track 示例以清晰 JS/TS 混用可读为准，类型深挖见 TypeScript 课。

• Virtual DOM 要先啃完吗？
  不必。入门记住：你描述 UI，框架更新页面。

• Options API 还要学吗？
  能读懂旧代码有益；新项目优先 Composition + script setup。

错法对照

错法	问题	正解
跳过 JS 直接抄 Vue	看不懂报错	先 javascript-core
用 Vue 又手改同一块 DOM	状态与屏幕打架	改数据驱动 UI
只看 Vue 2 老文	Options/过时生命周期	以 Vue 3 文档为准
以为学 Vue 要重写 platform	方向错	主站仍 React/Next
纯背 API 清单	无「真学到」感	跟做 + 自测
用轻慢称呼自我定位	不符合讲义标准	用「入门/常见卡点」

自测三问

1. 「渐进式」对你选技术栈有什么实际含义？
2. Vue 与 React 各用什么表达「列表由数组决定」？
3. 为什么本站仍值得单独开 Vue track？

小结一句话

Vue 用响应式数据与模板描述 UI；思想对齐 React，语法与生态不同，本站主栈仍是 React/Next。

动手加深

打开 React 核心 · React 是什么 与本课并排：

1. 两边各用一句话写「状态变了之后谁更新 DOM」
2. 各举一个本站或练习里的「列表由数组决定」例子
3. 写下你为什么仍要学 Vue（路线图 / 岗位 / 读代码），即使 platform 是 React

若写不出来，说明「对照迁移」还没建立——重做步骤 3 的对照表，而不是急着创建项目。

步骤 7：扫官方 Learn 目录

在 cn.vuejs.org 左侧扫一眼「基础」章节标题：模板、响应式、计算属性、组件、生命周期。
本 track 12 课基本覆盖同一主线；遇到术语回官方当字典，正文以本站例子为准。

官方延伸

• Vue 简介
• 下一课：项目创建与单文件组件（SFC）