关于 Vue3 这些知识，你可能还不知道( 二 ) 1024程序

现在可以在Vue中使用 SuspenseSuspense是React的一个功能，现已在Vue3中引入。 Suspense 让组件“等待”某个异步操作，直到该异步操作结束即可渲染。
当我们想要异步加载setup()方法中的内容时，这很有用。简而言之，只需知道 setup 方法可以像其他方法一样被设置为异步的。
如果我们要在等待组件获取数据并解析时显示“正在拼了命的加载…”之类的内容，则只需三个步骤即可实现Suspense 。

将异步组件包装在标记中
在我们的 Async 组件的旁边添加一个兄弟姐妹，标签为。
将两个组件都包装在组件中

使用插槽， Suspense 将渲染后备内容，直到默认内容准备就绪。然后，它将自动切换以显示我们的异步组件。
正在拼了命的加载…Fragment在Vue 3中，我们可以期待的另一个令人兴奋的补充是Fragment 。你可能会问，什么是碎片？如果你创建一个Vue组件，那么它只能有一个根节点。这意味着不能创建这样的组件
HelloWorld原因是代表任何Vue组件的Vue实例需要绑定到一个单一的DOM元素中。唯一可以创建一个具有多个DOM节点的组件的方法就是创建一个没有底层Vue实例的功能组件。
结果发现React社区也遇到了同样的问题。他们想出的解决方案是一个名为 Fragment 的虚拟元素。它看起来差不多是这样的：
class Columns extends React.Component {render() {return (HelloWorld);}}尽管Fragment看起来像一个普通的DOM元素，但它是虚拟的，根本不会在DOM树中呈现。这样我们可以将组件功能绑定到一个单一的元素中，而不需要创建一个多余的DOM节点。
目前你可以在Vue 2中使用vue-fragments库来使用Fragments ，而在Vue 3中，你将会在开箱即用!
PortalsPortals是一种特殊的组件，目的是在当前组件之外渲染某些内容。这也是React中原生实现的功能之一。下面是 React 文档中关于portals的说法。
Portals 提供了一种第一流的方式，可以将子节点渲染到父组件的DOM层次结构之外的DOM节点中。
这是一种非常好的处理modals、弹出窗口和一般要出现在页面顶部的组件的方式。通过使用portals ，你可以确保没有任何一个主组件的CSS规则会影响到你想要显示的组件，并且免除了你用z-index做讨厌的黑客的麻烦。
下面是Portal-Vue文档中的示例屏幕截图和代码。

文章插图
对于每一个Portals ，我们需要指定它的目标目的地，在那里， Portals内容将被渲染。

The content below this paragraph isrendered in the right/bottom (red) container by PortalVue

This is content from the left/top container (green).The cool part is, it works across components,so you can send your content anywhere!

Vue3 优化了渲染内部测试表明， Vue3中的模板样式比Vue2快约120％。
有两个关键的优化提高Vue3渲染速度：

Block Tree 优化
提升静态节点树

我们进一步详细介绍一下。
Block Tree 优化使用虚拟DOM有一个瓶颈，因为每个组件都必须跟踪其依赖关系。监听这些依赖关系速度会变慢很多，因为它递归地检查整个元素树。
Vue团队注意到的一件事是，在组件中，节点的大部分结构都是静态的。而且，如果某个节实际上是动态的（由于v-if或v-for指令），则其中的许多内容都是静态的。

文章插图
使用此想法， Vue3将模板分为静态部分与动态部分。现在，渲染器知道哪些节点是动态的，它不会浪费时间检查静态节点的变化。
这大大减少了需要被动监视的元素数量。
结合所有这些节点可创建一个Block Tree或一个基于指令（v-if ， v-for）分为节点块的模板。
在 Block Tree 中，每个节点具有：

完全静态的节点结构
不需要监听的静态内容
可以存储在数组中的动态节点

文章插图
这消除了对每个元素进行递归检查的需要，从而大大改善了运行时间。
静态树提升(Static Tree Hoisting)使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态的，然后将其提升，从而降低了渲染成本。它将能够跳过 patching 整棵树。
这大大减少了虚拟DOM的工作，并节省了大型项目开销，主要是垃圾收集。