React 和 Vue 的设计理念有什么不同？
核心理念对比
| 维度 | React | Vue |
|---|---|---|
| 编程范式 | 函数式 | 响应式 + 声明式 |
| 数据流 | 单向 | 双向绑定（v-model） |
| 模板 vs JSX | JSX | 模板 + JSX（可选） |
| 状态管理 | 不可变 | 可变（Proxy 代理） |
| 组件抽象 | 函数 + Hooks | SFC（单文件组件） |
| 编译优化 | 运行时（React Compiler 改善中） | 编译时（静态提升、PatchFlag） |
数据变化检测
React — 不可变 + 虚拟 DOM Diff
// React：创建新对象触发更新
const [list, setList] = useState([])
setList([...list, newItem]) // 必须创建新引用
// React 不知道什么变了，需要 Diff 整棵树Vue — 响应式 + 精确追踪
// Vue：直接修改触发更新
const list = ref([])
list.value.push(newItem) // 直接修改
// Vue 知道具体哪个属性变了，精确更新模板 vs JSX
Vue 模板 — 受限语法，编译时优化：
<template>
<div>{{ message }}</div>
<button @click="handleClick">Click</button>
</template>- 编译时可以做静态分析、静态提升、PatchFlag
- 更接近 HTML，学习门槛低
- 灵活性有限
React JSX — JavaScript 表达力：
<div>
{condition && <Child />}
{list.map(item => <Item key={item.id} {...item} />)}
</div>- 完整的 JavaScript 能力
- 编译时优化困难（JSX 太灵活）
- React Compiler 正在改善
编译时优化
Vue3 的编译优化：
// 编译器知道哪些是动态的
// 静态节点只创建一次
const _hoisted_1 = createElementVNode("div", null, "静态文本")
// PatchFlag 标记动态部分
createVNode("div", null, msg, 1 /* TEXT */)
// Diff 时只比较 text，跳过其他React — 运行时 Diff（React Compiler 改善中）：
// React 需要运行时比较整个虚拟 DOM 树
// React 19 的 Compiler 会自动 memo 化组件复用
React — Hooks
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 })
useEffect(() => { /* ... */ }, [])
return pos
}
// 简洁、组合灵活Vue — Composables
function useMouse() {
const pos = reactive({ x: 0, y: 0 })
onMounted(() => { /* ... */ })
return pos
}
// 类似 Hooks，但基于响应式系统总结
- React：函数式、JSX、不可变、灵活、生态大
- Vue：响应式、模板、渐进式、编译优化、上手快
- 两者都在互相借鉴：React 学编译优化，Vue 学 Hooks