Vue3 如何编译组件适配__VUE_HMR_RUNTIME__实现热更新替换

1. __VUE_HMR_RUNTIME__.createRecord()参数说明 #

• 第一个参数：字符串类型的全局唯一组件ID，用来唯一标记需要热更的组件，自己实现的话保证每个组件对应唯一值即可
• 第二个参数：defineComponent返回的原始组件配置对象，不需要提前预编译生成render函数，HMR运行时会自动关联对应组件的实例缓存

2. 编译更新后组件的正确方式 #

你遇到的defineComponent生成的组件没有render函数的问题，是因为Vue默认会对组件做懒编译：只有当组件被实际渲染到视图中时，才会把template编译为render函数挂载到组件配置上。
要给reload方法传符合要求的组件，手动提前完成编译步骤即可，注意要使用带编译器的Vue构建版本（runtime-only版本不含编译能力，会报错），示例代码如下：

import { compile, defineComponent } from 'vue'

// 定义更新后的组件
const updatedCmp = defineComponent({
  template: '<div>test Me!</div>'
})

// 手动编译模板生成render函数
const { render, staticRenderFns } = compile(updatedCmp.template)
// 把编译产物挂载到组件配置上
updatedCmp.render = render
updatedCmp.staticRenderFns = staticRenderFns

// 调用HMR热更接口，第一个参数要和createRecord时传入的唯一ID完全一致
__VUE_HMR_RUNTIME__.reload('你的组件唯一ID', updatedCmp)

不需要调用Vue.component重新注册修改后的组件，reload接口会自动更新所有已注册的同名组件定义，同时通知所有已挂载的该组件实例重新渲染，不会触发重复注册的警告。

关于替换方式的说明 #

如果是在浏览器端直接做运行时组件替换，手动调用compile编译模板是最直接的实现方式。如果是基于Vite、Webpack等构建工具的项目，对应的Vue插件/Loader会在构建阶段提前把所有组件的template编译为render函数，不需要在运行时手动处理编译逻辑。

内容的提问来源于stack exchange，提问作者AHOYAHOY