深入学习Vue.js（十一）内建组件和模块

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

文章目录

KeepAlive组件的实现原理

KeepAlive组件的实现原理

KeepAlive组件的名字借鉴与HTTP协议和HTTP协议一样KeepAlive可以避免频繁的创建/销毁组件。

1.KeepAlive组件实现原理

KeepAlive组件的实现需要渲染器层面的支持。因为KeepAlive组件在卸载时并不会真正的卸载而是被搬运到一个隐藏的容器中实现“假卸载”。当被隐藏的组件被再次挂载时我们将这个组件从隐藏容器中再搬运回原容器。这个过程对应的生命周期即actived和deactived。

2.KeepAlive组件的代码实现

KeepAlive组件本身不会渲染额外内容它的渲染函数最终只返回需要被KeepAlive的组件我们把需要被KeepAlive的组件称为“内部组件”。KeepAlive组件会对内部组件进行操作主要是在内部组件上添加一些标记以便渲染器据此进行一些特定的操作。

code

1shouldKeepAlive

shouldKeepAlive标记的作用就是在组件卸载函数中判断被卸载的是否是一个KeepAlive组件如果是调用KeepAlive组件的deActive方法进行组件的隐藏。

code

2keepAliveInstance

内部组件的vNode会持有KeepAlive组件的实例该实例被用来访问_deActive函数。

3keptAlive

内部组件如果已被缓存则会被添加一个keptAlive标记这样当内部组件需要重新渲染时渲染器不会重新挂载它而是将它激活。

code

4move函数

在KeepAlive组件中的move函数是由渲染器注入的。

code

3.include和exclude

默认情况下KeepAlive组件会对所有组件进行缓存。但有时用户期望只缓存特定组件。为了使组件能够自定义规则我们需要让KeepAlive组件支持两个props即include和exclude。其中include用来显式配置该被缓存的组价而exclude用来显式地配置不应该被缓存的组件。

code

4.缓存策略

在之前的KeepAlive组件实现中我们设置的缓存是只要一个组件存在于缓存中就直接返回该组件否则将该组件添加到缓存中。而这种策略存在一种问题即如果缓存对象一直增加那么缓存对象所占用的内存会越来越多这将会消耗大量的系统资源。对此我们需要进行优化。而优化的策略也比较简单即LRU最近最少使用算法具体实现就跟LeetCode上的LRU那题差不多。除此之外Vue还支持自建缓存策略。只需要在组件的属性上声明cache属性。

code