你以为 HTMX 只能靠服务端拼 HTML？今天它用 fetch() 把这件事彻底翻了

写过 HTMX 的人都踩过这个坑——表单填了一半，点了个按钮，结果整个页面刷新了，只剩下一个孤零零的错误提示。表单内容全部清空，重新来过。

这不是 HTMX 的 bug，这是它的代价。htmx 2.x 的 DOM 替换策略是「innerHTML 式的整体替换」，旧节点直接被新节点覆盖，用户的输入状态、滚动位置、焦点全丢了。你要么靠插件修修补补，要么自己在服务端多传一堆 hidden 字段。

htmx 4.0（2026-08-28 正式发布）把这件事用 fetch() 当基础设施彻底变了。

XHR → fetch()：不是换 API，是换架构

htmx 4.0 用了 8 个月时间，把底层从 XMLHttpRequest 迁移到了 fetch()。表面看是 API 替换，实际上解放了三个能力：

第一，Morph Swap 变成标配。htmx 4.0 内置了 idiomorph 算法（此前是扩展），它会对比新旧 DOM 树，只替换有变化的部分，保留用户正在输入的 input、滚动位置、焦点状态。Carson（htmx 作者）把这个能力从扩展挪进核心，理由很直接——这是 fetch 带来代码库简洁性的直接好处。

第二，原生 View Transitions 集成。htmx 4.0 默认在支持的浏览器里启用 View Transitions API，页面状态切换可以自动带上淡入淡出或滑动效果，不需要写一行 CSS 或 JS。这意味着从列表页点到详情页，可以有流畅的交互动画，而不是生硬的整页替换。

第三，事件体系全面标准化。旧版 htmx 的事件名是 htmx:afterRequest 这种驼峰式，新版统一改成 htmx:after:request，与 CSS 事件命名规范对齐。扩展作者和框架集成者受益最大。

显式属性继承：安全是安全了，但旧项目要查一轮

htmx 4.0 对属性继承做了重大变更——默认不再继承。

旧版里，父元素的 hx-target=”div#result” 会自动传递给子元素，子元素写了 hx-get 就默认用父的 target。这在大型表单里很方便，但也容易踩坑：你不小心在深层嵌套里写了个 hx-swap，结果整个父链的行为都被改了，你还不知道为什么。

4.0 里，属性继承变成显式的——子元素想继承父元素的 HTMX 属性，需要加 :inherited 后缀。

这个改动是 breaking change，但官方给了升级检查工具：npx htmx.org@4.0.0 upgrade-check，可以扫描你的 2.x 项目列出需要修改的地方。同时官方还提供了 LLM skill 文件，用于 AI 辅助迁移。

<hx-partial>：一个响应，多个更新点

htmx 4.0 新增了 <hx-partial> 标签，这是对旧版「带外替换」的重新设计。服务端一次返回的 HTML，可以指定更新多个不同的 DOM 位置。htmx 会自动把各个片段分发到对应的元素里。这比过去靠多个请求或靠 response header 指令要简洁得多，也更接近 Hotwired Turbo Streams 的思路——htmx 和 Hotwired 互相借鉴的痕迹越来越明显。

历史记录不再写 localStorage

htmx 2.x 有一套复杂的历史记录引擎，会把当前 DOM 快照存进 localStorage，用户点前进/后退时恢复这个快照。这个机制在单页应用里经常出问题——快照和真实服务端状态不一致，用户看到的是过期的旧页面。

htmx 4.0 直接放弃了这套机制，改回标准浏览器的行为——前进/后退重新发请求拿最新数据。如果你想恢复旧的行为，可以加 hx-history-cache 扩展自己管理。

升级路径：2.x 还是 4.x？

htmx 2.x 会继续维护，官方把 2.x 保留为 NPM 的 latest 标签直到 2027 年初，所以存量项目不用急着升。但如果你正在开新项目，或者计划用 Morph Swap、View Transitions、<hx-partial> 这套新能力，直接上 4.0。

升级检查工具会告诉你具体哪些地方需要改，主要是属性继承那块。如果你的项目用了很多深层嵌套的 HTMX 属性，最好先跑一遍再动手。

三步下一步：

1. 跑升级检查：npx htmx.org@4.0.0 upgrade-check 扫描你的项目，生成改动清单
2. 优先处理表单和列表页：这两个场景受属性继承变更影响最大，先过一遍
3. 把 Morph Swap 用起来：加 hx-swap=”morph” 到关键的动态表单提交，用户的输入体验会明显改善

htmx 4.0 的核心不是哪个单独的新功能，而是 fetch() 基础设施解锁了一整套「服务端返回 HTML → 局部智能更新」的能力组合。如果你还在用它做简单的表单提交，可以试试 View Transitions 和 morph swap，会对这个模型的上限有新的认识。