vue注册新节点_Vue 中如何转移 Dom ？

这个标题可能很拗口，请允许我先做下简短的解释。

在我们使用 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 支持程度、组件初始化方式上都和预期差异较大，所以便决定了自己开发一款右键菜单组件。

还好小剧曾在 jQuery 时代写过一款右键菜单组件，所以主体逻辑并没有花太多时间。

结合前面提到的用