当使用 Vue CLI 进行 Vue 项目开发时，页面能够自动刷新的底层机制是怎样的？

回答思路

1. 【回答框架 1】Vue CLI 开发环境默认使用 webpack-dev-server，其自动刷新依赖 WebSocket 与 Hot Module Replacement 机制。浏览器与 dev server 建立 WebSocket 长连接，dev server 监听文件变化。
2. 【回答框架 2】当源码文件修改后，webpack 重新编译，并将更新后的模块信息通过 WebSocket 推送给浏览器客户端。客户端根据推送内容决定执行热替换或整页刷新。
3. 【回答框架 3】热替换针对模块级更新，保留应用状态；若更新涉及未配置 HMR 的模块或边界情况，则回退为整页刷新。
4. 【回答框架 4】开发服务器通过 watch 模式检测文件变化，并利用内存文件系统加快编译和传输。
5. 【回答框架 5】整体实现了开发反馈的实时性，减少手动刷新，提升开发体验。
6. 【关键点 1】自动刷新依赖开发服务器与浏览器间的 WebSocket 长连接。
7. 【关键点 2】热更新机制可保留应用状态，而整页刷新是降级方案。
8. 【关键点 3】文件监听触发重新编译，编译产物通过内存文件系统传输。
9. 【关键点 4】HMR 实现基于模块热替换，需模块支持或接受更新。
10. 【易错点 1】混淆 HMR 与整页刷新，不知热替换失败会回退整页刷新。
11. 【易错点 2】忽略 WebSocket 连接异常导致的刷新失效问题。
12. 【易错点 3】误以为所有文件修改都会触发热替换，不考虑模块边界。