Vue keep-alive 组件缓存

Question

Vue 内部把 DOM 节点抽象成一个个 VNode，keep-alive 组件缓存的是 VNode 不是真实 DOM 节点，它将满足条件（pruneCache 与 pruneCache）的组件在 cache 对象中缓存起来，在需要重新渲染的时候再将 vnode 节点从 cache 对象中取出并渲染。

keep-alive

created() {
 /* 缓存对象 */
    this.cache = Object.create(null)
}
destoryed() {//在组件被销毁的时候清除 cache 缓存中的所有组件实例。
     for (const key in this.cache) {
        pruneCacheEntry(this.cache[key])
        // this.cache[key]是 vnode
        // key vnode.key or id+tag
    }
}

获取 slot 插槽中的组件

render() {
    /* 得到 slot 插槽中的第一个组件 */
    const vnode: VNode = getFirstComponentChild(this.$slots.default)
    const componentOptions =  vnode && vnode.componentOptions;

}