KeepAlive组件的实现原理

Untitled

keepAlive所包裹的函数,在卸载的时候并不是真的卸载,而是将其移动到隐藏容器内。并保留实例属性

include和exclude

简单的实现,可以使用正则表达式与组件名称进行匹配,匹配不上则不对组件进行缓存

缓存管理

当占用内存过大时,应该清除掉一些缓存的组件,Vue所采用的修剪策略是“最近一次访问”,也就是先进先出

同时也支持通过cache属性将缓存管理权限交由用户手中。

Teleport组件的实现原理

Teleport为了不增减渲染器逻辑的臃肿,以及Tree Shaking支持。所以将其逻辑从渲染器中剥离,需要的方法与数据通过函数参数的方式由外部传入。

整体逻辑与普通组件渲染类似,需要注意一个点

  1. Teleport的to属性的变化,会影响组件内容的父节点,所以当to变化时,需要内容整体进行移动。

Transition组件的实现原理

实际上,transition组件只做了两件事

  1. 当DOM元素被挂载时,将动效添加到DOM元素上(通过设置变更class)
  2. 当DOM元素被卸载时,同样将动销添加到DOM元素上

具体的逻辑就不展开了,实现起来不难,但是繁琐

需要注意的点是:

  1. 提前设置好初始化状态,当DOM插入文档时,立即改变成过度状态
  2. 卸载时需要先变化成退出的过度状态,监听过度状态动画结束后再移除节点