在 vite 中，import.meta.hot 通过 dispose 和 accept 钩子配合 data 属性实现局部状态保持：dispose 中保存状态到 import.meta.hot.data，accept 中读取并恢复，从而跳过整模块刷新，精准维持表单输入、滚动位置等关键状态。
在 Vite 中，import.meta.hot 提供了底层 HMR（热模块替换）能力，允许你跳过默认的整模块刷新，自定义模块更新时的行为。要实现“精准的局部状态保持”，关键不是阻止 HMR，而是利用 accept 和 dispose 钩子，在模块被替换前后手动保存和恢复关键状态（比如表单输入、滚动位置、组件内部的响应式数据等）。
理解 import.meta.hot 的核心生命周期
import.meta.hot 是 Vite 在开发模式下注入的全局对象，仅存在于模块作用域中。它提供几个关键方法：
-
accept(cb)：声明当前模块可被 HMR 接受，并在模块更新时执行回调；不调用则该模块更新会触发父模块刷新。 -
dispose(cb)：在当前模块即将被替换前执行，适合清理副作用或保存状态。 -
decline()：显式拒绝 HMR，强制全页刷新（极少用）。 -
data：一个跨 HMR 生命周期持久存在的对象，可用于在dispose和accept之间传递数据（如状态快照）。
用 data + dispose + accept 实现状态接力
最常用且可靠的模式是：在 dispose 中把需要保留的状态存到 import.meta.hot.data，在 accept 回调中读取并还原。注意——accept 回调执行时，新模块代码已加载，但旧模块实例尚未销毁（此时可访问旧状态），而 data 是唯一能跨新旧模块共享的桥梁。
例如，一个带本地计数器的组件：
let count = 0;
// 保存当前 count 到 hot.data
import.meta.hot?.dispose((data) => {
data.count = count;
});
// 模块更新后，从 hot.data 恢复 count
import.meta.hot?.accept((mod) => {
if (mod && import.meta.hot?.data?.count !== undefined) {
count = import.meta.hot.data.count;
}
});
// 后续逻辑使用 count（如渲染、事件处理）
⚠️ 注意：import.meta.hot 仅在开发环境存在，生产构建时会被完全移除，无需条件判断（Vite 自动处理）。
在 Vue/React 组件中保持局部状态
框架组件通常有更高级的 HMR 封装（如 Vue 的 defineComponent 自动保状态），但若需精细控制（比如绕过默认行为、处理非响应式私有字段），仍可手动介入：
-
Vue setup script：在
onBeforeUnmount中保存状态到import.meta.hot.data，再在import.meta.hot.accept中恢复；注意避免与 Vue 的响应式系统冲突（如不要直接改ref.value后不触发更新）。 -
React 函数组件：用
useEffect清理时存状态，配合import.meta.hot.accept在模块更新后重置useState或useRef的初始值（需配合自定义 Hook 或闭包缓存）。
示例（React）：
import { useState, useEffect } from 'react';
function Counter() {
// 从 hot.data 恢复初始值
const [count, setCount] = useState(() => {
return import.meta.hot?.data?.count ?? 0;
});
useEffect(() => {
// 卸载前保存
return () => {
import.meta.hot?.data.count = count;
};
}, [count]);
import.meta.hot?.accept(() => {
// 新模块加载后，确保 state 不重置为 0
// （实际中常结合 useRef 缓存最新值，再用 setCount 强制同步）
});
return <button onclick="{()"> setCount(c => c + 1)}>{count}</button>;
}
注意事项与常见陷阱
精准状态保持看似简单，但容易出错：
- 不要在 accept 回调里直接操作 DOM 或重新挂载组件：Vite 的 HMR 是 JS 模块级的，DOM 更新应由框架自身驱动；手动操作易导致状态不一致。
-
函数引用无法跨模块保留：
import.meta.hot.data只能存可序列化的值（对象、数组、基本类型），不能存函数或 class 实例；需转为配置或纯数据结构。 -
父子模块都要声明 accept：如果子模块未
accept，父模块即使写了accept也会因子模块不可热更而回退到整页刷新。 -
避免副作用泄漏：
dispose中务必清理定时器、事件监听器、WebSocket 等，否则旧模块残留会导致内存泄漏或重复触发。
