组件定义方式

React
函数组件为核心，返回JSX（编译为React.createElement调用）。

• 源码机制：JSX编译后生成虚拟DOM结构。
• 优点：函数式编程友好，组合灵活，TypeScript支持优秀。
• 缺点：逻辑与模板混合，对非前端开发者不直观。

Vue
单文件组件（SFC）采用<template>+<script setup>+<style>结构。

• 源码机制：模板编译为渲染函数，类似React但更隐式。
• 优点：职责分离清晰，开发体验接近传统HTML/CSS。
• 缺点：依赖构建工具，灵活性低于JSX。

最新动态

• Vue 3.6引入Vapor模式，减少虚拟DOM开销。
• React 19（Alpha）试验编译时优化（React Compiler），与Vue思路趋同。

---

响应式数据

React
基于useState/useReducer，状态不可变，依赖组件重新执行。

• 源码机制：状态存储在Fiber节点的链表中。
• 优点：心智模型简单，适合函数式场景。
• 缺点：需手动优化冗余渲染（如memo）。

Vue
基于ref/reactive，通过Proxy实现依赖追踪。

• 源码机制：依赖收集存储于Dep（Vue 2）或effect（Vue 3）。
• 优点：精准更新，无需手动优化。
• 缺点：调试复杂，响应式系统较重。

---

引用与持久化值

React
useRef保存可变值，修改不触发渲染。

• 源码机制：Ref直接附加到Fiber节点。
• 适用场景：DOM引用或缓存数据。

Vue
ref统一管理数据和DOM引用，修改触发更新。

• 注意点：需谨慎处理.value的依赖更新性能。

---

模板语法

React
JSX允许任意JavaScript逻辑，但需手动处理key。

• 缺点：条件渲染和列表代码冗长。

Vue
指令式模板（如v-if/v-for），自动优化key。

• 优点：更接近HTML，学习成本低。

---

事件处理

React
合成事件（跨浏览器兼容），需手动处理表单更新。

• API特点：驼峰命名（如onClick）。

Vue
原生事件绑定，v-model简化表单处理。

• 缺点：跨平台兼容性依赖框架实现。

---

生命周期

React
依赖useEffect覆盖生命周期，灵活性高但易滥用。

Vue
显式钩子（如onMounted），语义更直观。

---

性能优化

React
需手动使用memo/useMemo，控制粒度更细。

Vue
编译时优化（如静态提升）和运行时依赖追踪。

---

渲染机制

React
虚拟DOM + Fiber架构，强调不可变数据和单向流。

• 最新进展：Concurrent Mode支持优先级调度。

Vue
虚拟DOM + Proxy，支持细粒度更新和双向绑定。

• 革新方向：Vapor模式减少运行时Diff成本。

核心差异

• React：追求极致控制，适合复杂应用。
• Vue：强调开发效率，适合快速迭代。