从 jQuery → V/R → Lit：前端架构的 15 年轮回

前端这十几年的发展，看起来是“日新月异”，
但如果把时间线拉长，会发现一件很有意思的事：

我们其实在不断“绕一大圈”，
最后又慢慢回到了浏览器本身。

这篇文章不讲 API、不讲语法，
只讲一件事：

前端架构思想是如何演进的？
Lit / Web Components 处在什么位置？

---

一、什么叫轮回？

前端架构的演进，本质上是：
“对浏览器不信任 → 完全接管 → 重新信任浏览器”。

---

二、第一阶段：jQuery 时代（2006 ～ 2012）

2.1 当年的真实问题

那个年代的前端只有三样东西：

• HTML（静态）
• CSS（基本布局）
• JS（DOM 操作）

浏览器：

• API 不统一
• 兼容性极差
• 几乎没有“组件”概念

---

2.2 jQuery 做了什么？

jQuery 的核心价值只有一句话：

“抹平浏览器差异，简化 DOM 操作”

$('#btn').addClass('active')

它解决的是：

• 选择器
• 事件绑定
• DOM 操作
• Ajax

---

2.3 jQuery 的“隐性模型”

虽然大家当年没意识到，但 jQuery 有一个非常重要的特点：

状态 = DOM

if ($('#btn').hasClass('active')) { ... }

DOM 既是：

• 数据来源
• 渲染结果
• 状态容器

---

2.4 问题开始显现

当页面复杂度上来后：

• 状态散落在 DOM 各处
• 逻辑和 UI 强耦合
• 修改一个功能容易“牵一发动全身”

这为下一阶段埋下了伏笔。

---

三、第二阶段：React / Vue 时代（2013 ～ 2020）

3.1 核心反思：DOM 不可信

这一代框架的共同起点是：

“不要直接操作 DOM”

于是出现了：

• Virtual DOM
• 单向数据流
• 状态驱动视图

---

3.2 关键思想转变

从：

操作 DOM → DOM 改变

变成：

状态改变 → 重新 render → DOM 更新

DOM 被彻底“降级”为：

渲染结果，而不是状态源

---

3.3 React / Vue 做对了什么？

它们解决了当时最致命的问题：

• 状态集中管理
• UI 可预测
• 组件化
• 规模化协作

这一步极其重要，也是前端工程化的真正起点。

---

3.4 但代价是什么？

随着时间推移，问题开始显现：

• 运行时越来越重
• 抽象层级越来越多
• 应用必须“跑在框架里”
• 框架升级成本极高

慢慢地，我们开始：

不信任浏览器，而只信任框架

---

四、第三阶段：全面接管浏览器

这是一个很多人没有意识到的阶段。

4.1 框架做了什么？

• 接管事件系统（Synthetic Event）
• 接管更新调度
• 接管组件模型
• 接管生命周期

浏览器只负责：

“执行 JS”

---

4.2 一个危险信号

当你发现：

• 离开框架就不会写前端
• 不清楚 DOM 何时更新
• 不理解浏览器事件模型

这其实是一个架构警告。

---

五、第四阶段：重新回到浏览器（2019 ～ 至今）

这就是 Lit / Web Components 出现的时代背景。

---

5.1 浏览器这十年发生了什么？

很多人低估了浏览器的进化：

• Custom Elements
• Shadow DOM
• ES Modules
• Template / Slot
• 原生性能优化

浏览器已经具备组件能力。

---

5.2 Lit 的态度非常明确

“浏览器已经足够强，
框架不应该再全面接管。”

所以 Lit 的选择是：

• 不接管事件
• 不接管调度
• 不接管生命周期
• 只做最小增强

---

六、Lit 与 jQuery：一个惊人的相似点

这是一个很多人没意识到的事实

6.1 相似之处

jQuery	Lit
信任 DOM	信任 DOM
轻量	轻量
无强生态	无强生态
易被集成	易被集成

---

6.2 本质差异

jQuery：

操作 DOM

Lit：

声明 DOM + 精确更新

这是 15 年演进换来的认知升级。

---

七、这不是“倒退”，而是“螺旋上升”

有人会说：

“这不就是回到原生吗？”

这是误解。

真正的区别是：

• 我们经历过复杂度
• 理解过规模化
• 吃过抽象的红利与代价

现在选择“回归”，是有意识的取舍。

---

八、为什么 Lit 没有取代 React / Vue？

因为它们解决的是不同层级的问题。

层级	工具
应用层	React / Vue
组件层	Lit
平台层	浏览器

它们并不是“竞争关系”。

---

九、一个 IImportant 的时代判断

未来前端不会“只剩一个框架”，
而是“分层更加清晰”。

• 应用继续用成熟框架
• 组件 / 基础设施回归 Web 标准
• 浏览器能力不断增强

---

十、总结

如果选择学习 Lit / Web Components，
并不是为了“追新”，而是为了：

• 理解前端的边界
• 理解浏览器的能力
• 理解架构取舍

---

十一、SOOOOOO

真正成熟的前端工程，
不是不断叠加抽象，
而是知道什么时候该停下来。