实现思路
- component本质是一个对象
- 缓存组件实际上就是缓存组件的对象数据
- 既然是缓存-那就不能无限存储-采取缓存策略LRU
分析源码
- 本质上keep-alive是一个abstract组件
- 本身不渲染东西-是一个slot插槽组件
- 里面可以传入include-exclude-max进行操作
- 使用cacheVnode对组件实例vnode进行缓存
- 使用lru策略进行缓存
使用this.$watch 对两个props进行监听
缓存和引用的移除
在initRender阶段通过 resolveSlots-解析$slots
resolveSlots代码
- 对插槽里面的组件进行解析
- 当组件数据发生修改的时候会触发
updateChildren-继而触发patchVnode - 这是一开始进来
keep-alive组件还没有缓存的时候
keep-alive满足这里的判断条件会被更新
使用resolveSlots解析里面的内容-使用$forceUpdate强制更新
切换组件
- 当切换组件的时候这个时候会重新
render
会执行createComponent
- 这个时候有了componentInstance
- 不在会执行initComponent
- 而实去执行reactivateComponent
