vue中按钮调位置_Vue超好玩的新特性：DOM传送门

前言

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

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

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

联想

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

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

• 时光机
• 竹蜻蜓
• 任意门

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

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

传送门

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

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

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

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

我们来解释一下：

• 「目的地」：任意门的使用方法是"在打开门时要想着目的地，否则将通向无法预知的地区"

• 「受目的地环境的影响」：假如你的目的地是一个极寒之地，那么你就会像下图这样：

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