Vue3中如何避免Vite挂载应用时清空替换容器内原有DOM内容？

核心原因 #

Vue3的mount方法默认行为与Vue2不同：Vue2挂载时默认将容器原有innerHTML作为根组件模板编译，会保留原有内容；Vue3默认会先清空容器所有内容再挂载，所以空配置挂载也会清除原有内容。

保留容器原有内容的实现方法 #

手动指定根组件模板为容器原有innerHTML即可复用已有内容，和Vue2的使用体验完全一致：

import { createApp } from 'vue'
const container = document.querySelector('#app')

createApp({
  template: container.innerHTML
}).mount(container)

注意：该用法需要Vue支持运行时编译，使用vite等构建工具时需在配置中开启runtimeCompiler: true。

原生HTML页面零散使用Vue组件的方式 #

全局注册后直接在HTML中调用 #

提前将需要用到的组件注册到app实例，即可直接在容器内的原有HTML中写组件标签、传props、绑定事件，和Vue2用法完全相同：

import { createApp } from 'vue'
// 引入SFC组件
import MyCard from './MyCard.vue'
import MyButton from './MyButton.vue'

const container = document.querySelector('#app')
const app = createApp({
  template: container.innerHTML
})

// 全局注册组件
app.component('MyCard', MyCard)
app.component('MyButton', MyButton)

app.mount(container)

注册完成后直接在HTML中使用即可：

<div id="app">
  <!-- 原有WordPress静态内容 -->
  <div class="post-content">...</div>
  <!-- 直接插入Vue组件 -->
  <my-card title="测试卡片" />
  <my-button type="primary">提交</my-button>
</div>

无 runtimeCompiler 兼容方案 #

如果不想开启运行时编译，也可以给每个组件的挂载点单独创建小型Vue应用，互不干扰且不会影响页面其他内容：

import { createApp } from 'vue'
import MyButton from './MyButton.vue'

// 单独给按钮挂载点创建应用，传入props
createApp(MyButton, {
  type: 'primary',
  text: '提交'
}).mount('#my-button-container')

对应HTML写法：

<!-- 页面原有内容 -->
<div class="post-content">...</div>
<!-- 组件挂载点 -->
<div id="my-button-container"></div>

SFC 兼容性说明 #

SFC完全支持上述两种用法，不管是全局注册后在HTML中调用，还是单独挂载到指定节点，都可以正常使用SFC的所有特性。

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