Vue 和 React 的核心渲染机制 对比

我用前端面试标准答案 大白话给你讲清楚保证你一听就懂、一说就会。Vue 和 React 的核心渲染机制一句话总结Vue响应式劫持 → 精确追踪变化 → 细粒度更新React状态更新 → 触发重渲染 → 虚拟 DOM 对比 → 最小化更新一、Vue 渲染机制2/3 通用核心思想一致1. 数据响应式核心Vue2用Object.defineProperty劫持对象的get/setVue3用Proxy代理整个对象只要数据一变Vue立刻知道是哪个属性变了2. 依赖收集模板里用到了哪个数据Vue 就把它记录下来建立依赖关系模板 → 组件 → 数据谁用了谁负责更新3. 精确更新细粒度更新某个数据变了 → 只更新用到这个数据的地方→ 组件不会随便全量重渲染性能天生友好4. 虚拟 DOM 只是优化手段Vue 并不是必须用虚拟 DOM它是为了跨平台、批量更新才用的。二、React 渲染机制1. 状态不可变Immutable 思想React 不监听数据只认state/props 有没有被设置setCount()→ 状态变了 → 组件触发重渲染不劫持、不监听靠主动触发更新2. 虚拟 DOM核心 Diff组件重渲染 → 生成新的虚拟 DOM 树React Diff 算法对比新旧树找出最小差异只更新真实 DOM 变化的部分3. 全量重渲染默认行为父组件更新 →默认所有子组件跟着重渲染需要手动优化React.memouseMemouseCallback4. 调和ReconciliationReact 把“对比虚拟 DOM 更新真实 DOM”的过程叫调和。三、最核心区别VueReact怎么知道数据变了数据劫持自动监听手动 setState不监听更新粒度精确到数据/节点组件级别重渲染默认性能好自带优化一般需手动优化虚拟 DOM优化手段核心机制更新触发被动数据变就更主动调用 setState一句话Vue 是“我知道你哪里变了我只更那里”React 是“你告诉我变了我整棵树对比一遍再更”四、超简记忆版背这个就行Vue响应式劫持 依赖收集 细粒度精准更新React状态驱动 虚拟 DOM Diff 组件级重渲染