本文探讨了在 Vue 开发中如何将 DOM 转移到组件外部，以解决特殊场景下的需求，如对话框、右键菜单和用户提示组件等。文章介绍了两种转移 DOM 的方法：渲染前转移 vnode 和渲染后转移 $el 节点，并通过实例详细解释了实现过程。最后，作者提醒尽管这种方法有时有用，但常规开发中应谨慎使用，以避免潜在的问题和内存泄漏。
这个标题可能很拗口，请允许我先做下简短的解释。
在我们使用 Vue 进行开发时，Dom 最终渲染的结构与 template 嵌套逻辑是一致的，有着严格的父子级关系。
假如我们有特殊需求，需要将某个 viewModel 的 Dom 渲染到父级之外，需要如何操作？
一、真的有这种需求 ？
可能你在看了前面介绍之后会觉得很奇怪，也意识到自己的开发经验里从来没有过这样的需求。
什么样的场景才会需要转移 Dom 呢 ？
如果你有过 UI 组件开发的经验，可能会发现，随着模块划分越来越细，模块层级越来越深，某些组件的 Dom 并不适合渲染在自身所属的 Dom 上。
比如常见的返回顶部按钮，悬浮广告，还有下面三个更生动的例子。
对话框
右键菜单
用户提示组件
花十秒钟想一下这些组件有什么样的特点 ？
开始
10
9
8
7
6
5
4
3
2
1
结束
这些模块都属于用户交互组件，并不属于页面静态布局的一部分，需要用户的操作来唤醒。
并且受限于页面各个层级的 overflow 设置，如果嵌入结构过深很容易导致渲染不完整。z-index 管理也会更加混乱，并且高频的创建、销毁也会引起不必要的局部重绘。
因此在开发 UI 用户交互组件的时候，如果有必要，可以考虑将 Dom 转移到组件外部，可能更便于管理。
二、遇到了什么蛋疼的功能？
之所以会思考这个问题，是因为最近小剧所在的团队正在开发一款新产品， 暂时不方便透露具体的产品名，等到上线后再找机会和你聊一聊。
因为产品的交互特性需要「右键菜单」的功能，按照惯例开始在 Npm 上找前人发布的开源包。可能在 API 支持程度、组件初始化方式上都和预期差异较大，所以便决定了自己开发一款右键菜单组件。
还好小
最低0.47元/天 解锁文章
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
