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 是为路线图与就业面，不是替换本站主栈。