Vue3是否可以将body元素作为根挂载点？有哪些优缺点？

Vue3调整了根挂载逻辑，不再整体替换挂载节点，仅替换节点的innerHTML内容，因此createApp(App).mount('body')是官方支持的合法写法，但非特殊场景不推荐使用，具体的优缺点和注意事项如下：

核心优点 #

• 简化DOM结构：无需在body中额外插入<div id="app"></div>类的占位根节点，页面初始DOM结构更精简
• 适配特殊业务场景：对于需要接管整个页面渲染、和传统多页应用混合开发、或者需要直接替换全页静态内容的场景，挂载到body的逻辑更直接，不需要额外处理根节点的占位逻辑

主要缺点 #

• 易和第三方资源产生冲突：很多第三方SDK、浏览器扩展、统计脚本会默认往body下插入DOM节点，Vue挂载时会清空body的所有innerHTML，会直接销毁这些节点导致第三方功能失效；反过来第三方脚本在Vue挂载完成后插入的节点，也可能被Vue的DOM diff逻辑误删，引发未知的页面异常
• 不符合通用开发约定：前端生态的绝大多数工程脚手架、SSR/SSG框架、微前端框架、性能监控工具的默认适配逻辑都是基于自定义根节点开发的，挂载到body需要额外修改适配规则，会增加不必要的开发和维护成本
• 提升样式问题排查成本：如果根组件未开启样式隔离，很容易直接修改到body、html的原生全局样式，引发全站范围的样式污染，且问题排查难度更高

必须挂载到body的注意事项 #

如果业务场景确实需要挂载到body，需要做好以下兼容处理：

• 提前清理body内容：确保挂载前body内没有需要保留的静态DOM、内联script等内容，需要保留的script标签统一放到head标签内加载
• 调整第三方资源加载时机：所有第三方SDK、统计脚本等需要往body插入内容的资源，统一调整到Vue应用挂载完成后再加载，避免被挂载逻辑清空
• 做好全局样式隔离：给根组件最外层节点设置唯一的类名前缀，所有全局样式都限制在该类名作用域下，禁止直接修改body、html的原生样式
• 做好兼容性验证：上线前验证主流浏览器扩展（如密码管理器、广告屏蔽插件）的运行情况，避免出现非预期的冲突问题

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