1.2 React 与 Vue 的定位差异

1.2 React 与 Vue 的定位差异

本节摘要：React 是"库 + 声明式 + 自由组合"，Vue 是"渐进式框架 + 模板 + 开箱即用"。差别不是声色而是路线：前者把机制交给 JS 生态，后者把约定内置进框架。分清这两条路线，你就具备了评判组件方案的第一把尺子。

本节阅读目标
阅读完本节，你应当能够：

1. 用一句话说出 React 和 Vue 各自的本质定位。
2. 从模板方式、响应式、学习曲线、生态四个维度对比两者。
3. 在具体编程动作层，说出两者的组件在"表述界面"上的风格分界。

一、定位：库与框架的两条路线

React 官方的自我描述是"用于构建用户界面的库"。注意"库"这个字——它把路由、状态、请求这些交给庞大的第三方生态，你按自己的口味组合，机制高度暴露，多数靠 JavaScript 表达。Vue 则自称"渐进式框架"：你可以在旧页面里引入一个脚本当作增强，也可以一路配置成完整的工程，模板、状态、工具大多是内置约定。

听起来抽象，落到写第一个组件的动作上就直观了。React 用 JSX 在 JavaScript 里写结构：

function GreetingButton({ name }) {
  const handleClick = () => alert('你好，' + name);
  return <button onClick={handleClick}>问候 {name}</button>;
}
​

Vue 用模板加脚本把同样的组件分成两块：

<template>
  <button @click="sayHi">问候 {{ name }}</button>
</template>
<script setup>
defineProps(['name']);
function sayHi() {
  alert('你好，' + name.value);
}
</script>
​

一个是"在 JS 里长 HTML"，一个是"在模板里写结构、在脚本里写逻辑"。没有高下，但风格的差异会一路蔓延到工具选择与团队协作。

二、核心差异对照

这一节套用整套教程的比稿视角：两套方案都过了"能做出界面"这个初筛，现在评审它们在几个维度上的取舍。下表是评审结论。

三、机制派的因果：为什么 React 用显式渲染

React 打定主意做"声明式"，但更新时机是显式的：状态改了，它会从组件根重新跑一遍渲染，算出新旧差异再落最小改动。好处是逻辑直白、可预测，坏处是"手动触发"这一点要求开发者对渲染时机有数。

Vue 用依赖收集把"什么时候该更新"也自动化了：读取过的数据建立了依赖关系，某条数据一变，只有依赖它的组件被通知。等价语法，两种世界观。这一点是第 2 章响应式那节的伏笔，本节先点到。

四、性能与规模的经验法则

选型走到这里，常见的再评判是性能。严肃讲，Vue 的精细依赖追踪和 React 的虚拟 DOM diff 在绝大多数业务里都不构成瓶颈，真正拉开差距的是别的东西：团队熟不熟、生态齐不齐、旧代码迁不迁移。与其纠结几毫秒，不如看第 1.3 节的场景约束。

五、一个比喻帮你记住

把组件比作辩论赛的立论稿。React 给你一支笔和自由命题，论证自己定、材料自己找，厉害的人能出彩，苦了新来者；Vue 给你一份评审模板，规定先讲什么后讲什么，照着填就能及格，上手快，但灵活度相对受限。两者没有谁更"正确"，只有谁更匹配你手里的项目和团队。

⚠️ 常见坑：别用"谁更容易"给两框架打分。学习曲线诚然不同，但"容易"会很快被"熟练度"中和，真正的变量是团队的长期稳定与生态对需求的覆盖度。

六、从一次真实选型看差异如何起效

光背概念容易忘，落到一个具体动作上一目了然。假设你要实现"输入关键词实时搜索用户列表"。React 里你需要自己处理请求触发的时机、防抖、状态何时写回，靠 Hooks 组合出来；Vue 里 watch 与 computed 负责同样的事，模板把这些能力的声明更贴近视图。两套代码都写一遍，你会直观感到：React 把控制权交给你，Vue 把常见路径替你铺设好。

// React：搜索输入 + 防抖
function SearchBox() {
  const [kw, setKw] = useState('');
  useEffect(() => {
    const t = setTimeout(() => fetchSearch(kw), 300);
    return () => clearTimeout(t); // 卸载与重键时清理
  }, [kw]);
  return <input value={kw} onChange={(e) => setKw(e.target.value)} />;
}
​

<!-- Vue：同一需求 -->
<script setup>
import { ref, watch } from 'vue';
const kw = ref('');
watch(kw, () => { /* 这里触发请求，配合防抖逻辑 */ });
</script>
<template><input v-model="kw" /></template>
​

两种写法都成立，但风格与"机制在谁手上"完全不同——这正是第 2.3 节响应式系统的伏笔。

本节要点回顾

• 库 vs 框架：React 自由组合，机制靠 JS 承担；Vue 内置约定，模板驱动。
• 结构表达分界：JSX 在代码里写结构，模板把结构单独拎出来。
• 更新时机：React 显式触发渲染，Vue 依赖追踪自动更新。
• 上手与生态：Vue 更适合快速起步，React 生态更大、选择更多。
• 选择落点：差异只在适用场景，不存在客观上的"更好"。

下一节把"对比"变成"决策"：当真实业务约束摆上桌，我们要按怎样的顺序完成 React 与 Vue 的取舍。