javascript - Vue3 : how to avoid Vitejs to erase/replace all DOM content when mounting the app?

Question

我来自 Vue 2，我习惯于使用 wordpress 标准 html 页面并在其中使用一些 Vue 组件。只需将容器传递给主应用程序 el 属性，然后我就可以在我想要的地方使用容器上的组件，而无需删除或替换所有默认容器的内容。基本上，将一个 dom 元素传递给 el 属性，使该元素成为一个 Vue 应用程序及其所有内容(即使没有任何 Vue 组件)。

使用 Vue 3 和 createApp，似乎没有办法做到这一点，因为一旦我将应用程序安装到容器(比如#app)，容器的所有内容就会被删除或替换为组件的模板(如果组件通过)。即使是以下不使用任何组件的内容，也将清除所有#app 原始内容:

import { createApp } from 'vue'

createApp({

}).mount('#app');

如何避免？如何在免费的 html 页面上只使用一些备用组件？以及SFC如何使用相同的方式？

Answer 1

从技术上讲，Vue 总是替换元素的内容(Vue 2 替换元素本身，Vue 3 替换它的内部内容 - migration guide)

如果 正在挂载的应用程序/组件没有template 选项或render 函数，然后(并且只有这样)Vue 获取原始内容DOM 元素(在挂载之前)并尝试将其编译成渲染函数(这就是为什么在使用 DOM 内模板时需要 Compiler + runtime build 的原因)

这也意味着，如果您的页面主要由静态 HTML(来自 WordPress)和仅“少量”Vue 组成，则此解决方案非常无效，这也是为什么 petit-vue 的原因存在(我建议阅读 Comparison with standard Vue

无论如何。我无法重现您的问题...

const app = Vue.createApp({
}).mount("#app")

<script src="https://unpkg.com/vue@3.2.9/dist/vue.global.js"></script>
<div id='app'>
  <div>
    <h2>Hello from HTML!</h2>
  </div>
</div>

那么有什么问题呢？

1. 检查浏览器开发工具控制台是否有任何错误消息——如果(从 DOM 检索的模板的)编译步骤失败，Vue 确实不会呈现任何内容，感觉就像“Vue 在挂载后删除所有内容”
2. 提防DOM Template Parsing Caveats .浏览器倾向于在 Vue 从 DOM 读取无效 HTML 之前“修复”它 - 可能导致 strange errors
3. 请务必使用包含模板编译器的 Vue 发行版。如果不这样做也会导致错误并删除所有内容