四、跨框架对比:不要机械对应

把相关知识和复习方法放在一起,随时回看。

主题 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 等,具体随项目选择

重点口述三点:

  1. **watch 与 Effect 不是简单换名字。**Vue 有自动依赖追踪相关机制,React 要结合每次渲染的快照和 Effect 同步语义理解。
  2. **computed 与 useMemo 也不完全等价。**Vue 追踪计算访问到的响应式依赖;React useMemo 接收显式依赖,并属于性能优化。
  3. **框架性能比较先给场景。**组件拆分、数据规模、渲染成本、编译能力、网络和团队经验都会影响结果,不能直接说某框架永远更快。