vue3.0新特性teleport是啥，用起来真香（开阔视野！）

前言

在vue2.0时代，我们经常会有这样的需求，写代码逻辑的时候希望将组件写在某个模板之下，因为这样我们很好的使用组件内部的状态数据，控制组件的展示形态。但是从技术的角度上我们又希望将这段代码移到DOM中Vue app之外的其他位置。

举个简单的例子，我们在使用modal组件的时候，我们将它放在了我们的模板template里面，但是由于modal组件希望位于页面的最上方，这时候我们将modal组件挂载在body上面是最好控制的，我们能够很好的通过zIndex来控制modal的位置，当他嵌套在templat里面的时候就不那么容易了。

vue2.0中的实现

vue2.0中我在写这个组件的时候是通过手动的形式来进行挂载的，我写了一个vue指令来进行这个操作，帮助我将modal组件挂载到body上面去，专这样也能够很好的通过控制zIndex来控制modal的展示。

function insert(el) {
  const parent = el.parentNode;
  if (parent && parent !== document.body) {
      parent.removeChild(el);
      document.body.appendChild(el);
  }
}

export default (typeof window !== 'undefined' ? {
  inserted(el, { value }) {
      if (value) {
          insert(el);
      }
  },
  componentUpdated(el, { value }) {
      if (value) {
          insert(el);
      }
  },
} : {});

上面的代码其实就是简单的将modal从他原始挂载的父节点移除，然后挂载到body上去，通过手动的形式来重新挂载，能够很好的解决这种问题，当然上面只是简单的逻辑，如果需要考虑卸载等其他逻辑代码还得增加。