Vue.js挂载动态创建DOM元素后内容为空问题排查

问题重现 #

在Squint Playground中执行以下代码后，目标div内容被清空，无法实现点击按钮递增计数的预期交互：

var vue = await import("https://esm.sh/vue@latest")
elt = document.createElement("div")
document.body.prepend(elt)
elt.innerHTML = `<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>`
app = vue.createApp({setup() { return {count: vue.ref(0)}}});
app.mount("#app")

问题原因 #

原代码中使用的Vue导入地址无法提供浏览器兼容的Vue ESM构建包，导致Vue实例初始化失败，挂载后无法正确编译和渲染模板内容，最终表现为目标div被清空但无交互效果。

修复方案 #

更换为浏览器专用的Vue ESM构建地址，使用指定版本的兼容构建包即可解决问题：

var vue = await import("https://cdn.jsdelivr.net/npm/vue@3.3.10/dist/vue.esm-browser.js")
elt = document.createElement("div")
document.body.prepend(elt)
elt.innerHTML = `<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>`
app = vue.createApp({setup() { return {count: vue.ref(0)}}});
app.mount("#app")

效果验证 #

更换导入地址后，代码可正常运行：点击按钮时，计数会实时递增，模板内容正确渲染并响应交互。

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