React 和 Vue 有什么区别？

详细解析#

对比一览#

响应式和不可变数据#

<script setup>
import { ref, computed } from 'vue'

const todos = ref([])
const doneCount = computed(() => todos.value.filter((t) => t.done).length)

function add(text) {
  todos.value.push({ id: Date.now(), text, done: false }) // 直接修改，Vue 能追踪到
}
</script>

function TodoApp() {
  const [todos, setTodos] = useState([])
  const doneCount = todos.filter((t) => t.done).length // 每次渲染重新计算，开销大时再用 useMemo

  function add(text) {
    setTodos([...todos, { id: Date.now(), text, done: false }]) // 必须创建新数组
  }
  // ...
}

Vue 在读取数据时记录"谁用到了它"，修改时精确通知这些地方，原理见 Vue 3 的响应式原理。React 不追踪数据被谁读取，只知道"这个组件的状态变了"，于是重新执行组件函数，生成新的虚拟 DOM 再对比，见 虚拟 DOM 和 diff 算法。

模板、JSX 和优化方式#

• Vue 的模板语法受限，编译器能分析出哪些节点是静态的、哪些属性是动态的，更新时跳过静态内容，见 Vue 3 的编译优化。开发者一般不需要手动优化
• JSX 就是 JavaScript，可以随意使用条件、循环和函数，灵活，配合 TypeScript 也很自然，但很难做同等程度的静态分析。React 的优化主要是避免不必要的重新渲染，见 useMemo、useCallback 和 React.memo

Hooks 和 Composition API#

两者都按功能组织逻辑、通过函数复用，写法相似，执行模型却不同：

React 的这些规则都源于"每次渲染重新执行"，见 Hooks 的原理 和 闭包陷阱；Vue 一侧见 Composition API。反过来，React 的模型也有好处：每次渲染都是普通的函数调用，数据都是普通的值，没有"解构丢失响应性""要写 .value"这类问题。

选型考虑#

• 团队经验：团队熟悉哪个就用哪个，这往往比框架本身的差异更重要
• 上手和开发效率：Vue 的模板和官方配套对新手友好；React 更接近"纯 JS"，灵活度高，但很多方案要自己组合
• 生态和跨端：需要用同一套技术开发原生移动应用时，React Native 是成熟的选择；两者都有对应的全栈框架，如 Nuxt、Next.js
• 已有项目：已有代码、组件库和团队招聘情况，通常是决定性因素

面试官可能追问#

易错点#

• 不要说"Vue 是双向数据流"：Vue 的 props 同样是单向的，v-model 只是 prop 加事件的语法糖
• 不要笼统地说哪个框架性能更好，性能更多取决于具体的写法和场景
• Vue 也支持 JSX，React 也能借助编译器优化，模板和 JSX 并不是区分两者的根本原因