React × Vue 差异笔记

用同一个可运行 Demo，对照 React 与 Vue 的实现方式、更新模型与生态实践。

这里不是两份彼此独立的教程，而是一组按知识关系连接起来的对照笔记。每篇都用同一条路径组织：先建立心智模型，再看流程图和最小代码，最后通过真实 Demo 验证结论。

渲染与响应式

从 render、setup 和状态更新链路理解两套框架为何会更新。

组件边界

对照 props、事件、内容分发、上下文和命令式 ref。

复用与性能

区分逻辑复用、派生状态、计算缓存与引用稳定性。

表单与样式

比较表单数据流、样式隔离和运行时 CSS 变量。

React 生态实践

用真实示例学习表单校验、服务端状态缓存和复杂状态更新。

推荐阅读顺序

flowchart LR
  mental["渲染与响应式"] --> boundary["组件边界"]
  mental --> reuse["复用与性能"]
  boundary --> form["表单与样式"]
  reuse --> ecosystem["React 生态实践"]
  form --> ecosystem

图中实线表示主要数据或处理路径，虚线表示反馈、通知或下一轮更新。

第一次阅读建议依次查看渲染模型、响应式系统与状态更新模型和状态 API。它们分别回答组件何时执行、框架如何感知变化，以及日常代码应该怎样更新状态。

**阅读原则：**先理解“状态怎样推动 UI”，再记 API。代码块展示刻意压缩后的关键路径，可运行 Demo 则用于观察真实框架行为。