hmr 在 vue 中实现模块级热更新且保留组件状态，依赖构建工具集成、按 template/script/style 块粒度更新、模块依赖图精准定位影响范围、hmr runtime 安全替换及响应式系统状态合并机制。
HMR（Hot Module Replacement，热模块替换）在 Vue 开发环境中，核心是让组件、逻辑或样式变更后，不刷新页面就能更新对应模块，同时保留组件实例状态（比如表单输入、计数器数值、滚动位置等）。它不是 Vue 独有，而是由构建工具（如 Vite 或 Vue CLI 底层的 Webpack）实现，但 Vue 生态通过 vue-loader（Webpack）或 @vitejs/plugin-vue（Vite）深度集成，使 HMR 对开发者近乎“隐形”且高度可靠。
Vue 文件如何被精准更新？
Vue 单文件组件（.vue）会被解析为多个逻辑块：template、script、style，甚至 custom blocks。HMR 不是整体替换整个 .vue 文件，而是按块粒度更新：
- 修改 template → 触发组件重新编译渲染函数，但复用当前组件实例（
this不变，响应式数据和生命周期钩子不重走） - 修改 script（setup 或 export default）→ 重新执行脚本逻辑，通过 Vue 的 HMR runtime 注入新
setup()或选项，重建响应式系统并保留已有状态 - 修改 style（哪怕 scoped CSS）→ 直接替换
<style></style>标签内容，无需 JS 参与，零状态影响
底层依赖图如何定位影响范围？
Vite 或 Webpack 都会构建并维护一张实时的模块依赖图（Module Graph）：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 当
Button.vue被修改，系统立刻查出哪些模块import了它（例如App.vue、PageHome.vue） - 只通知这些 importer 模块进行局部更新，而不是全量重载整个应用
- 如果
Button.vue又引用了utils.ts，而你只改了utils.ts，则可能触发 Button 和所有依赖 Button 的模块级联更新（取决于是否启用accept传播）
浏览器端如何安全替换而不崩溃？
关键靠 Vue 官方 HMR runtime 提供的标准化接口，它在开发构建时自动注入到每个 Vue 组件模块中：
-
import.meta.hot?.accept()（Vite）或module.hot.accept()（Webpack）用于声明“我接受谁的更新” - Vue loader 插件已为你预置好 accept 逻辑：比如接收 template 更新时调用
rerender()，接收 script 更新时调用reload()并尝试保留当前组件实例 - 若组件正在执行异步操作（如 pending API 请求），runtime 会等待其完成再替换，避免状态错乱
为什么状态能保留？
这不是魔法，而是 Vue 运行时与 HMR 协同的结果：
- 组件实例（
vm或componentInstance）本身未被销毁，DOM 节点也被复用 - data、ref、computed 等响应式数据对象仍存在内存中；新 setup() 函数返回的新 proxy 会尝试合并旧值（Vite）或通过 patch 机制迁移（Webpack + vue-loader）
- 对于非响应式私有属性（如
this._cache或手动挂载的变量），需开发者显式在dispose/decline钩子中处理，否则可能内存泄漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
