四、跨框架对比:不要机械对应
把相关知识和复习方法放在一起,随时回看。
| 主题 | Vue2 | Vue3 | React |
|---|---|---|---|
| 组件内状态 | data 中可观察的属性 | ref / reactive 等 | useState / useReducer 等快照 |
| 更新方式 | 响应式 setter、数组方法等通知 | 代理或 ref 访问触发依赖更新 | setter / dispatch 请求重新渲染,重视不可变更新 |
| 派生数据 | computed | computed | 渲染时计算,昂贵时评估 useMemo |
| 副作用 | watch、生命周期 | watch / watchEffect、生命周期 | 事件处理与 Effect 按触发原因区分 |
| 逻辑复用 | 工具函数、组件、mixin;2.7 可用组合式 API | composables、组件、工具函数 | 自定义 Hook、组件、工具函数 |
| 父子更新约定 | props / events;value / input | props / emits;modelValue / update:modelValue | props / 回调,受控组件 |
| 跨层依赖 | provide / inject、Vuex | provide / inject、Pinia 等 | Context、外部 store 等 |
| DOM 更新相关时机 | nextTick 等 | nextTick、post watcher 等 | commit、ref、布局 Effect 等;没有一一等价 API |
| 实例状态保留 | 节点身份、key、keep-alive | 节点身份、key、KeepAlive | 树位置、类型、key;缓存另看方案 |
| 路由 / SSR | Vue Router、Nuxt2 等 | 对应路由版本、Nuxt 等 | React Router、Next.js 等,具体随项目选择 |
重点口述三点:
- **watch 与 Effect 不是简单换名字。**Vue 有自动依赖追踪相关机制,React 要结合每次渲染的快照和 Effect 同步语义理解。
- **computed 与 useMemo 也不完全等价。**Vue 追踪计算访问到的响应式依赖;React useMemo 接收显式依赖,并属于性能优化。
- **框架性能比较先给场景。**组件拆分、数据规模、渲染成本、编译能力、网络和团队经验都会影响结果,不能直接说某框架永远更快。