Vue 3.0 中令人激动的新功能：Portals+新的自定义指令API

本文主要是介绍Vue 3.0 中令人激动的新功能：Portals+新的自定义指令API，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

第一篇：Vue 3.0 中令人激动的新功能：Composition API

第二篇：Vue 3.0 中令人激动的新功能：Fragment+Suspense+多个v-model

这是最后一篇了，文章很长，但是都是干货，值得花费时间去看看学习了解。

Portals

Portals是一种特殊的组件，目的是在当前组件之外渲染某些内容。这也是React中原生实现的功能之一。这是React文档中关于portals的说法。

"Portals提供了一种第一流的方式，可以将子节点渲染到父组件的DOM层次结构之外的DOM节点中。"

这是一种非常好的处理modals、弹出窗口和一般要出现在页面顶部的组件的方式。通过使用portals，你可以确保没有任何一个主组件的CSS规则会影响到你想要显示的组件，并且免除了你用z-index做讨厌的hack的麻烦。

对于每一个Portals，我们需要指定它的目标目的地，在那里，Portals内容将被渲染。下面你可以看到portal-Vue库的实现，它在Vue 2中增加了这个功能。

<portal to="destination">  <p>This slot content will be rendered wherever thportal-target with name 'destination'    is  located.</p></portal>
<portal-target name="destination">  <!--  This component can be located anywhere in your App.  The slot content of the above portal component wilbe rendered here.  --></portal-target>

Vue 3将附带对 portals的开箱即用支持！

新的自定义指令API

自定义指令API将在Vue 3中略有改变，只是为了更好地与组件生命周期保持一致。这个变化应该会让新用户更容易理解和学习，因为它现在更直观了。

这是目前的自定义指令API。

const MyDirective = {  bind(el, binding, vnode, prevVnode) {},  inserted() {},  update() {},  componentUpdated() {},  unbind() {}}

…这就是Vue 3中的样子。

const MyDirective = {  beforeMount(el, binding, vnode, prevVnode) {},  mounted() {},  beforeUpdate() {},  updated() {},  beforeUnmount() {}, // new  unmounted() {}}

尽管这是一项重大更改，但它应该很容易被Vue兼容版本轻松涵盖。

这个API的改变目前在这个RFC中讨论，这意味着它可能会在未来发生变化。

Psst！你可以在我们的课程中学习如何掌握自定义指令。