14.1.2 include 和 exclude

让用户自定义缓存规则：include 显式指定该被缓存的组件，exclude 显式指定不该被缓存的组件，两者都按组件名与正则匹配。

一、给 KeepAlive 增加两个 props

include：匹配上的组件才缓存；
exclude：匹配上的组件不缓存；
为简化，本例只接受正则类型的值（官方实现还支持字符串与数组）。

const KeepAlive = {
  __isKeepAlive: true,
  props: {          // 新增
    include: RegExp,
    exclude: RegExp
  },
  setup(props, { slots }) {
    // ...
  }
}

二、匹配逻辑

组件名从 rawVNode.type.name 取（即组件选项对象的 name），再做正则 test：

return () => {
  const rawVNode = slots.default()
  // 非组件的虚拟节点无法被 KeepAlive，直接渲染
  if (typeof rawVNode.type !== 'object') return rawVNode

  // 获取「内部组件」的 name（即组件选项里的 name）
  const name = rawVNode.type.name

  // 命中「不缓存」规则：既不满足 include，或命中了 exclude
  if (
    name &&
    (
      (props.include && !props.include.test(name)) || // 无法被 include 匹配
      (props.exclude && props.exclude.test(name))     // 或者被 exclude 匹配
    )
  ) {
    return rawVNode // 直接渲染，走正常的挂载 / 卸载逻辑
  }

  // 否则按 14.1.1 的流程走缓存：查缓存 → 标记 keptAlive / shouldKeepAlive / keepAliveInstance
  const cachedVNode = cache.get(rawVNode.type)
  if (cachedVNode) {
    rawVNode.component = cachedVNode.component
    rawVNode.keptAlive = true
  } else {
    cache.set(rawVNode.type, rawVNode)
  }
  rawVNode.shouldKeepAlive = true
  rawVNode.keepAliveInstance = instance

  return rawVNode
}

判定结果对照：

`include`	`exclude`	结果
未传	未传	全部缓存
传了，匹配上 name	未传（或未匹配）	缓存
传了，未匹配 name	未传	不缓存（正常挂载/卸载）
未传（或匹配上）	传了且匹配上 name	不缓存（`exclude` 优先级高于 `include`）

三、使用与测试用例

组件必须提供 name 才能被匹配：

const testA = {
  name: 'testA', // 新增：供 include / exclude 匹配
  setup() {
    return () => ({ type: 'h2', children: 'testA...' })
  }
}

const testB = {
  name: 'testB',
  setup() {
    return () => ({ type: 'h2', children: 'testB...' })
  }
}

// 只缓存 testA
const CompVNode = {
  type: KeepAlive,
  props: { include: /testA/ },
  children: {
    default() {
      return { type: is.value ? testA : testB }
    }
  }
}

四、易错点

匹配的是组件名而不是变量名 / 文件名：include: /testA/ 只有在组件选项写了 name: 'testA' 时才生效。

组件没有 name 时 name 为 undefined，上面整个 if 条件恒为假 → 该组件绕过 include/exclude 规则，永远被缓存。

一次只允许渲染一个内部组件：slots.default() 返回多个节点时无法按单个组件名判定，规则会失效。

正则不是全局匹配，test 用的是子串匹配，/A/ 会匹配到 testA、testAB 等，命名时注意歧义。

14.1.2 include 和 exclude

一、给 KeepAlive 增加两个 props

二、匹配逻辑

三、使用与测试用例

四、易错点

相关