第 8 章 · 前端框架对比

框架把「状态」与「视图」绑定，状态一变视图自动更新；Vue 和 React 是两条主流路线。

8.1 组件化：复用与组合

两者都以组件为最小单元，组件 = 模板 + 逻辑 + 样式：

// React：JSX，模板与逻辑都在 JS 里
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

<!-- Vue：SFC 单文件组件，模板/脚本/样式分块 -->
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
<template>
  <button @click="count++">{{ count }}</button>
</template>

• 组件间靠 props（父传子）+ 事件/回调（子传父）通信，跨层用状态管理（8.4）。

8.2 响应式：两条实现路线

• Vue：依赖收集（细粒度）。ref/reactive 把数据包成响应式对象，模板读取时记录依赖，数据变更时精确通知用到它的地方更新。
• React：不可变数据 + 整树 diff。setState 返回新对象（旧的不动），然后重渲染组件、比对虚拟 DOM，算出最小变更落到真 DOM。

// Vue：直接改，自动追踪
state.count++;            // 依赖收集后精确触发

// React：不可变，必须用 setState 换新值
setCount(c => c + 1);     // 不直接改原值

对比：Vue 依赖收集细粒度更新，React 不可变 + 整树 diff；Vue 更自动，React 更显式可预测。

8.3 虚拟 DOM

两者都引入虚拟 DOM：先在内存里的轻量对象树算出差异，再一次性提交给真 DOM，避免频繁触发回流/重绘：

状态变化 → 生成新 VDOM 树 → diff 出新旧差异 → 最小化 patch 到真 DOM

• 为什么要它：批量化、跨平台（VDOM 可渲染到 canvas/原生），且把「直接操作 DOM」的易错细节藏起来。
• Vue 的响应式让它只需重渲染「受影响组件」，React 则重渲染该组件子树再 diff。

8.4 状态管理

组件多了，跨组件共享状态用集中式 store：

• React：Redux/Zustand/Jotai，核心是不可变 reducer + 单向数据流。
• Vue：Pinia（Vuex 的继任），利用响应式，改状态即同步视图。

维度	Vue 3	React
模板	模板语法（更接近 HTML）	JSX（JS 内写标记）
响应式	依赖收集（ref/reactive）	不可变 + diff（useState）
更新粒度	组件级精准	组件树重渲染 + diff
状态管理	Pinia	Redux/Zustand
学习曲线	平缓	需适应 JSX/Hooks
生态	官方全家桶（Router/Pinia）	社区大而散

对比：Vue 上手平缓、模板直观；React 心智统一、生态庞大。无绝对优劣，取决于团队与项目规模。