热更新与清理
标准项目由 vite-plugin-monkey 接入 Vite 开发客户端,再由 Vite 和 Vue / React 插件处理更新。
修改代码后会发生什么
| 修改内容 | 默认更新方式 |
|---|---|
| Vue / React 组件 | 框架插件在可接受的组件边界内更新;是否保留状态取决于修改内容 |
| 样式 | Vite 或 Monkey 的样式处理更新对应样式 |
| 普通 Task 模块或应用入口 | 没有局部 HMR 边界接住更新时,沿依赖链传播到入口并触发整页刷新 |
整页刷新会结束旧页面上下文,旧组件、DOM 监听器和观察器随之释放;开发脚本随后在新页面中重新启动。局部组件更新由框架处理,Makoo Runtime 继续运行。
自定义热更新边界
如果主动使用 import.meta.hot.accept(),或在框架识别为热更新边界的组件模块中创建 Runtime,更新可能在该模块停止。此时应由该模块负责旧副作用的清理与重新创建,不能再假设一定整页刷新。
将 Runtime 创建和任务启动放在普通应用入口中,组件负责自身 UI。页面继续运行时需要移除功能,使用任务句柄或 Runtime 的销毁方法,见生命周期与清理。组件自行创建的定时器、订阅和事件仍应在框架卸载钩子中释放。
配置和依赖变化
安装或升级依赖、修改插件和依赖解析时,观察 Vite 是否自动重启;需要手动重启时按 dev 首页的 r。修改脚本 metadata 后,还应检查脚本管理器里的开发脚本是否更新。
重启服务与更新浏览器入口是不同操作:前者重建开发服务器,后者替换网页中的模块。连接与快捷键见本地开发。