Vue3：如何避免 Vitejs 在挂载应用程序时擦除/替换所有 DOM 内容？

Question

我来自 Vue 2，我习惯使用 wordpress 标准 html 页面并在其中使用一些 Vue 组件。 只需将容器传递给主 app 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 替换了它的内部内容 - 迁移指南）

如果正在安装的应用程序/组件没有template选项或render function，那么（并且只有在那时）Vue 会获取 DOM 元素的原始内容（在它安装之前）并尝试将其编译为渲染 function（这就是您需要编译器的原因+ 使用 DOM 内模板时的运行时构建）

这也意味着，如果您的页面主要由 static HTML（来自 WordPress）和 Vue 的“少量”组成，那么这个解决方案非常无效，也是petit-vue存在的原因（我建议阅读与标准 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 模板解析注意事项。 浏览器倾向于在 Vue 从 DOM 读取之前“修复”无效的 HTML - 可能会导致奇怪的错误
3. 请务必使用包含模板编译器的 Vue 发行版。 不这样做也会导致错误并删除所有内容