面试题：Vue项目中HMR机制的基本原理是什么

Question

在Vue项目中，简要阐述模块热替换（HMR）机制是如何实现局部更新而无需刷新整个页面的基本原理。

Answer 1

1. webpack-dev-server 监听文件变化：
   • webpack-dev-server 启动后，会在项目目录中启动一个文件系统监听器，实时监听文件系统的变化。当源文件（如 Vue 组件的 .vue 文件、JavaScript、CSS 等）发生修改时，监听器会捕获到这些变化事件。
2. webpack 重新编译变更模块：
   • 监听器捕获到文件变化后，webpack 会基于配置的规则对发生变化的模块及其依赖进行增量编译。它不会重新编译整个项目，而是仅针对变更的部分，这大大提高了编译效率。例如，在 Vue 项目中，如果只是一个 .vue 组件的模板部分发生了修改，webpack 只会重新编译这个组件相关的模块。
3. HMR 运行时处理：
   • webpack 编译完成后，会生成新的模块代码。HMR 运行时（在浏览器端运行的代码）会与 webpack-dev-server 建立的 WebSocket 连接进行通信，接收关于哪些模块发生了变化的信息。
   • 对于 Vue 组件，HMR 运行时会根据接收到的模块变化信息，找到对应的 Vue 组件实例。
   • 然后，它会尝试使用 Vue 提供的 API 进行局部更新。例如，对于模板更新，Vue 会对比新旧模板，通过虚拟 DOM 算法计算出最小的 DOM 变更，然后仅更新实际需要变化的 DOM 部分，而不是刷新整个页面。对于样式更新，HMR 运行时会直接更新 <style> 标签或通过 CSS - in - JS 等机制来更新组件的样式，同样无需刷新整个页面。