第十四章：内建组件和模块

被 KeepAlive 包裹的组件不是真的卸载，而是从原来的容器搬运到另外一个隐藏容器中，实现“假卸载”，当被搬运的容器需要再次挂载时，应该把组件从隐藏容器再搬运到原容器，这个过程对应到组件的生命周期就是 activated 和 deactivated。

一个基本的 KeepAlive

keepAlive 是需要渲染器支持的

javascript

function mountComponent(vnode, container, anchor) {
  /**... */
  const instance = {
    /** ... */
    state,
    props: shallowReactive(props),
    // KeepAlive 实例独有
    keepAliveCtx: null
  };

  const isKeepAlive = vnode.__isKeepAlive;
  if (isKeepAlive) {
    instance.keepAliveCtx = {
      move(vnode, container, anchor) {
        insert(vnode.component.subTree.el, container, anchor);
      },
      createElement
    };
  }
}

实现一个简易的 KeepAlive

javascript

const KeepAlive = {
  // KeepAlive 特有的属性，用来标识
  __isKeepAlive: true,
  setup() {
    /**
     * 创建一个缓存对象
     * key: vnode.type
     * value: vnode
     */
    const cache = new Map();
    // 当前 keepAlive 组件的实例
    const instance = currentInstance;
    const { move, createElement } = instance.keepAliveCtx;
    // 创建隐藏容器
    const storageContainer = createElement('div');

    // 为 KeepAlive 组件的实例增加两个方法
    instance._deActive = vnode => {
      move(vnode, storageContainer);
    };
    instance._active = (vnode, container, anchor) => {
      move(vnode, container, anchor);
    };

    return () => {
      // keepAlive 的默认插槽就是要被缓存的组件
      let rawVNode = slot.default();
      // 不是组件类型的直接返回，因为其无法被缓存
      if (typeof rawVNode !== 'object') {
        return rawVNode;
      }

      // 挂载时，优先去获取被缓存组件的 vnode
      const catchVNode = cache.get(rawVNode.type);
      if (catchVNode) {
        rawVNode.component = catchVNode.component;
        // 避免渲染器重新挂载它
        rawVNode.keptAlive = true;
      } else {
        // 如果没有缓存，就将其加入到缓存，一般是组件第一次挂载
        cache.set(rawVNode.type, rawVNode);
      }
      // 避免渲染器真的把组件卸载，方便特殊处理
      rawVNode.shouldKeepAlive = true;
      rawVNode.keepAliveInstance = instance;
      return rawVNode;
    };
  }
};

从上可以看到，KeepAlive 组件不会渲染额外的内容，它的 render 函数最终只返回了要被缓存的组件（我们称要被缓存的组件为“内部组件”）。KeepAlive 会对“内部组件”操作，主要是在其 vnode 上添加一些特殊标记，从而使渲染器能够据此执行特殊的逻辑。

shouldKeepAlive： 渲染器在卸载组件时，如果 vnode 上读到此变量就会执行“假卸载”，调用 _deActivate完成搬运。

javascript

function unmount(vnode) {
  const { type } = vnode;
  if (type === Fragment) {
    /**... */
  } else if (typeof type === 'object') {
    if (vnode.shouldKeepAlive) {
      vnode.keepAliveInstance._deActivate(vnode);
    } else {
      unmount(vnode.component.subTree);
    }
    return;
  }
}

keepAliveInstance： “内部组件”会持有 KeepAlive 组件实例，在 unmount 时通过 keepAliveInstance 访问 _deActivate 方法。
keptAlive： “内部组件”渲染时，如果有这个属性，渲染器不会执行挂载而是将其激活。

javascript

function patch(n1, n2, container) {
  if (n1 && n1.type !== n2.type) {
    unmount(n1);
    n1 = null;
  }
  const { type } = n2;
  if (type === 'string') {
    /** 执行普通的标签 patch */
  } else if (type === Text) {
    /** 处理文本节点 */
  } else if (type === Fragment) {
    /** 处理Fragment节点 */
  } else if (typeof type === 'object') {
    if (!n1) {
      if (n2.keptAlive) {
        n2.keepAliveInstance._activate(n2, container, anchor);
      } else {
        mountComponent(n2, container, anchor);
      }
    } else {
      patchComponent(n1, n2, anchor);
    }
  }
}

第十四章：内建组件和模块 ​

一个基本的 KeepAlive ​

第十四章：内建组件和模块

一个基本的 KeepAlive