前端框架（Vue/React）：界面更新的运行链路

当你在Vue或React项目中修改一个变量（如count = 1变为count = 2），界面上的数字会自动更新——这种“数据驱动视图”的特性，是现代前端框架最核心的能力。它彻底告别了jQuery时代“手动操作DOM更新界面”的繁琐（如$('#count').text(newValue)），让开发者只需关注数据变化，无需关心“如何同步到界面”。

但框架是如何做到“数据变，界面自动变”的？从数据修改到界面更新的链路中，Vue和React分别经历了哪些步骤？它们的“响应式系统”和“渲染机制”有何异同？本节我们将拆解这一过程，揭示前端框架实现界面自动更新的底层逻辑。

从“手动DOM操作”到“数据驱动”：框架解决的核心问题

在jQuery时代，更新界面的流程是“开发者主导”的：

1. 用户操作触发事件（如点击按钮）；
2. 开发者手动修改数据（如count++）；
3. 开发者手动找到对应的DOM元素，更新其内容（如$('.count').html(count)）。

这种模式的痛点在于：数据与DOM强耦合，当界面复杂时（如电商购物车的多规格商品），开发者需要编写大量重复的DOM操作代码，且容易出现“数据与界面不一致”的bug（如漏更、错更）。

现代前端框架（Vue/React）通过“数据驱动视图”解决这一问题，核心思路是：建立数据与DOM的自动关联，当数据变化时，框架自动计算需要更新的DOM并执行操作