Vue 与 React 对比与选型
Vue 与 React 的本质差异：Vue 是“响应式数据 + 模板编译”，通过 Proxy 拦截数据变化、精确知道哪个组件依赖哪些数据，更新粒度是组件级；React 是“单向数据流 + 手动 setState”，状态变化后整组件树重新渲染（Fiber 架构可中断与复用），靠 memo / useMemo / useCallback 手动优化。模板写法上 Vue 用 SFC（template + script + style），React 全部是 JSX（JS 的力量即视图的力量）。
选型没有绝对优劣，看团队与场景：中小项目、快速出活、希望开箱即用（路由 / 状态管理 / 表单校验生态完整）选 Vue；大型应用、TypeScript 深度集成、跨端（React Native）、函数式风格团队选 React。面试加分回答：两者都在向对方靠拢 —— Vue3 的 Composition API 更函数式，React 的编译优化（React Compiler / memo）在做 Vue 式的细粒度更新。
- Vue = 数据驱动精确更新（Proxy 知道谁依赖谁）；React = 状态变化重渲染组件树
- 生态：Vue 全家桶官方闭环；React 生态百花齐放（router / state 都有多个方案）
- 选型看团队：求快求全选 Vue；求类型化、跨端、函数式选 React
HTML
<!-- Vue SFC 风格（模板编译，精确依赖追踪） --> <pre><template> <button @click="count++">{{ count }}</button> </template> <script setup> import { ref } from 'vue'; const count = ref(0); // Proxy 拦截，点击只更新这个组件 </script></pre> <!-- React JSX 风格（状态变化 → reconcile → 重渲染） --> <pre>import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(c => c + 1)}>{count}</button>; } // 大列表优化对比： // Vue：v-for + key，框架已做细粒度 // React：列表项需 React.memo 包裹，避免父重渲染带崩子组件</pre> <style> pre { background: #fffaf0; padding: 12px; border-left: 4px solid #f0c33c; overflow-x: auto; } </style>
本节要点Vue 精确响应式更新 vs React 状态驱动重渲染；选型看团队栈与场景，两者思想正在互相靠拢。
