скомпилировать компонент Vue 3 для HMR

#vue.js #vuejs3 #webpack-hmr #vue3-sfc-loader

Вопрос:

vuejs/vue-hot-reload-api для Vue2 примите простой объект с параметрами компонента.

Vue3 имеет встроенную поддержку HMR, и для этого нужен другой подход. Я не могу понять, как правильно обновить компонент.

Для чего нужны данные __VUE_HMR_RUNTIME__.createRecord() ?

И как снова скомпилировать обновленный компонент для __VUE_HMR_RUNTIME__.reload()

Я думаю, что обе функции нуждаются render в функциях. Но он создается, когда компонент загружается в dom или что-то в этом роде. Когда я использую что-то вроде приведенного ниже, render() функция отсутствует cmp .

 let cmp = defineComponent({template: 'lt;divgt;testlt;/divgt;}) let inst = Vue.component('test', cmp)  

Когда я использую компонент в родительском компоненте, функция render() компилируется и включается в cmp .

Но я не могу зарегистрировать измененный компонент таким же образом, потому что Vue3 показывает предупреждение о том, что этот компонент уже зарегистрирован.

Как скомпилировать обновленный компонент ниже и использовать его в __VUE_HMR_RUNTIME__.reload() ?

 let updatedCmp = defineComponent({template: 'lt;divgt;test Me!lt;/divgt;'})  

Я попробовал compile() функцию vue, но она не работает для меня…

Я предполагаю, что это единственный способ заменить компонент измененной версией во время выполнения? 🙂