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！你可以在我们的课程中学习如何掌握自定义指令。

总结

除了Composition API是Vue 3中最大的新API之外，我们还可以发现很多小的改进。我们可以看到，Vue正在向着更好的开发者体验和更简单、更直观的API发展。我们也很高兴看到，Vue团队决定将许多目前只能通过第三方库来实现的想法采纳到框架的核心。

上面的列表只包含了主要的API变化和改进。如果你对其他的东西很好奇，请一定要查看Vue RFCs仓库。

原文：https://vueschool.io/articles/vuejs-tutorials/exciting-new-features-in-vue-3/

这篇文章终于翻译完了，读完这三篇文章，我对Vue 3.0的更新大概就有数了。后续我还会继续更新Vue 3.0的更多教程，欢迎关注我。

推荐阅读：

公众号后台回复【前端】加入群

好文和朋友一起看~