第十四章 内建组件和模块

89 阅读2分钟

Vue.js 内建的三个组件,即 KeepAlive 组件、Teleport 组件和 Transition组件。它们的共同特点是,与渲染器的结合非常紧密,因此需要框架提供底层的实现与支持。

KeepAlive

  1. KeepAlive 组件的作用类似于 HTTP 中的持久链接。它可以避免组件实例不断地被销毁和重。

  2. 被 KeepAlive 的组件“卸载”时,渲染器并不会真的将其卸载掉,而是会将该组件搬运到一个隐藏容器中,从而使得组件可以维持当前状态。当被 KeepAlive 的组件“挂载”时,渲染器也不会真的挂载它,而是将它从隐藏容器搬运到原容器。

  3. KeepAlive中的匹配策略和缓存策略。include 和 exclude 这两个选项用来指定哪些组件需要被KeepAlive,哪些组件不需要被 KeepAlive。默认情况下,include和 exclude 会匹配组件的 name 选项。但是在具体实现中,我们可以扩展匹配能力。对于缓存策路,Vuejs 默认采用“最新一次访问”。

Teleport

  1. Teleport 组件所要解决的问题和它的实现原理。Teleport 组件可以跨越 DOM 层级完成渲染,这在很多场景下非常有用。
  2. Teleport组件是一个特殊的组件。与普通组件相比,它的组件选项非常特殊,例如_isTeleport选型和 process 选项等。这是因为 Teleport 本质上是渲染器逻辑的合理抽象,它完全可以作为渲染器的一部分而存在。

Transition

  1. Transition 组件的实现原理与为原生DOM添加过渡效果的原理类似,我们将过渡相关的钩子函数定义到虚拟节点的 vnode.transition 对象中。渲染器在执行挂载和卸载操作时,会优先检查该虚拟节点是否需要进行过渡,如果需要,则会在合适的时机执行 vnode.transition 对象中定义的过渡相关钩子函数