Vue超好玩的新特性：DOM传送门

作者: 交互动效 | 来源:发表于2020-09-04 00:05 被阅读0次

image

前言

自从上一篇《Vue超好玩的新特性：在CSS中引入JS变量》大火之后，很多小伙伴纷纷点赞留言，所以我决定将《Vue超好玩的新特性》做成一个系列。

因为目前大多数的 Vue 3 文章重点都在讲 Composition API 和 响应式的优化 ，虽然这些新特性很棒，但大家都把其他的新特性给忽略掉了。或者有的文章只是简单的提了一嘴，然后写个简单的 Demo ，讲解的不够细致也不够深入。

除了响应式的优化和Composition API之外还有一些新特性非常的实用。所以记得关注我，带你解锁 Vue 3 各种好玩的新特性。

联想

相信大家或多或少都听说过 传送门 这个词。就算没有听说过，那么至少也应该看过《哆啦A梦》吧！(00后好像基本都没看过)

想一想在《哆啦A梦》中经常出现的道具都有什么？

时光机
竹蜻蜓
任意门

这三个道具经常出现，就证明这仨相比于其他道具来说，具有非常强大的通用性。

新版 Vue 就实现了这三个当中的：任意门( 传送门 )。

传送门

image
如果单单看到 传送门 这三个字的话，有可能无法联想出这到底是一个怎样的功能。

所以我们就用《哆啦A梦》中的任意门来进行举例：

可以想一想《哆啦A梦》中的任意门通常都有哪些特点？

目的地
受目的地环境的影响
目的地必须特别精确

我们来解释一下：

目的地：任意门的使用方法是"在打开门时要想着目的地，否则将通向无法预知的地区"
受目的地环境的影响：假如你的目的地是一个极寒之地，那么你就会像下图这样：

image
目的地必须特别精确：据不完全统计，大雄每10次使用任意门，就会有3次打开门撞见静香在洗澡。之所以出现这种情况的原因就是：~~大雄就是想看~~ 大雄打开门的时候想的目的地是"静香家"，而静香家有很多房间，但大雄并没有给任意门一个明确的指示到底去的是哪个房间，于是就直接去了静香所在的房间( 淋浴间 )：

image

<center>（只是举个例子不要钻牛角尖）</center>

Vue 中的传送门

那么再把这几个特性放在 Vue 的传送门中来看看：

目的地：传送门的使用方法是给一个 CSS 选择器来作为目的地。
受目的地环境的影响：假如目的地写了一个可以继承的那种 CSS 属性( 如：color )，那么被传送过去的 DOM 就会受到这个样式的影响。
目的地必须特别精确：假如你给目的地了一个可以匹配很多元素的选择器( 如: div )，那么只会给你传送到第一个匹配到的 div 里面去( 很有可能不是你想去的那个div )。

可能不少人看到这里还是晕晕乎乎的，这玩意到底有啥用？我写组件不就是为了把 DOM 封装在一起，干嘛要让 DOM 传送到别的地方去呢？

要是想在别的 DOM 元素中引入某个 DOM ，直接引入这个组件不就好了嘛，这不正是组件化的意义所在吗？

传送门的意义

来看这样一个案例：

image
相信大家应该对轮播图都很熟悉了，在这个轮播图之外有一排按钮，这排按钮可以控制轮播图内部的 面板指示点 的位置。

你可能会觉得这不很简单吗？封装一个组件，里面包含了这一排按钮、轮播图、面板指示灯。完了再定义一个位置变量，点击哪个按钮，变量就会随之变化。

之后 面板指示点 相对于轮播图来进行绝对定位，具体定位在哪个方向就靠这个位置变量来控制了。

那么问题来了，这一排按钮并不一定是在一个固定的位置，有可能在这个轮播图的左边，也有可能在右侧。
甚至说这四个按钮可能在别的 DOM 元素内，距离轮播图很远。

你听了以后觉得这也没啥啊，我把这个拆分成两个组件不就完了。按钮是单独的一个组件，轮播图和 面板指示点 又是另一个组件：

image
就像上图红框里的那样，这是两个不同的组件，你爱把他俩放哪就放哪，放多远都没关系。

当点击按钮的时候只需要用：emit、eventBus或者Vuex…等一系列你能想到的组件间通信方式进行通信就可以了。
把按钮的值传给轮播图，然后轮播图根据传进来的值来决定 面板指示点 的位置。

这么做完全可以实现，事实上以前我们大家一直都是这样实现类似需求的。

但这种实现有两方面的弊端：

封装性

这四个按钮的四个值似乎只会控制这个 面板指示点 ，它并不会去控制页面上其他的什么元素的上下左右，也就是说它的值只关联到 面板指示点。

而且如果要是有好几个轮播图的话，每个轮播图都是靠不同的一组按钮来控制，那么就会存在很多很多的组件间通信。

一方面在 Vuex 中能尽量少定义状态就尽量少定义。另一方面即使没用 Vuex ，用 emit 派发事件，然后再在父组件或祖先组件上监听事件再向下层层传递也显得过于麻烦，其他的一些组件通信方式也没好到哪去。

所以从封装性上来讲，它俩才应该是一个整体：

image

它们两个才应该被封装到一个组件当中去。

可复用性

如果项目中不止有这一个轮播图，还有一些不需要 面板指示点 的轮播图。而且不只是轮播图，假如还有别的 div 或者什么其他元素也需要一个能上下左右来回切换的 面板指示点 和一排可以控制位置的按钮，那你应该怎么做？

先封装按钮组件、再面板指示点组件、再轮播图组件(轮播组件中引入面板指示组件)、然后再来一个不带面板指示的轮播组件、再来几个需要面板的其他组件……

是不是感觉很麻烦、可复用性差而且耦合程度还高？之所以会出现目前这种情景，正是因为不能把他俩封装成一个组件而导致的：

image

那么到底是什么原因阻碍了它们两个在一起呢？

答案就是 DOM 结构

DOM 结构

假如把他俩封装到一起去会变成这样：

<template>
  <div>
    <!-- 按钮组件 -->
    <Btns/>
    
    <!-- 面板组件 -->
    <Points/>
  </div>
</template>

<style>
  .points {
    position: absolute;
  }
</style>

虽说为面板组件设置了绝对定位，但它相对的并不是我们想要让它相对的那个 DOM 元素。想要相对具体某个 DOM 元素定位最好的方式就是成为它的后代元素( 当然还要在祖先元素上设置非 static 定位 )。

但现在 <Points> 被限制在了这个组件中，没办法成为别人的后代元素，所以 DOM 传送门就是为了解决这个需求而诞生的！

听我讲到这里是不是已经有点明白过来 DOM 传送门的意义了呢？
DOM 传送门就是能把组件中的 DOM 元素传送到别的地方去。

它的意义就在于：