fix(keep-alive): include/exclude should work with async component (#3531

)

fix #3529

packages/runtime-core/__tests__/components/KeepAlive.spec.ts

@@ -14,10 +14,14 @@ import {
  ComponentPublicInstance,
  Ref,
  cloneVNode,
- provide
+ provide,
+ defineAsyncComponent,
+ Component
 } from '@vue/runtime-test'
 import { KeepAliveProps } from '../../src/components/KeepAlive'
 
+const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
+
 describe('KeepAlive', () => {
  let one: ComponentOptions
  let two: ComponentOptions
@@ -823,4 +827,53 @@ describe('KeepAlive', () => {
  await nextTick()
  expect(serializeInner(root)).toBe(`<div foo>changed</div>`)
  })
+
+ test('should work with async component', async () => {
+ let resolve: (comp: Component) => void
+ const AsyncComp = defineAsyncComponent(
+ () =>
+ new Promise(r => {
+ resolve = r as any
+ })
+ )
+
+ const toggle = ref(true)
+ const instanceRef = ref<any>(null)
+ const App = {
+ render: () => {
+ return h(
+ KeepAlive,
+ { include: 'Foo' },
+ () => (toggle.value ? h(AsyncComp, { ref: instanceRef }) : null)
+ )
+ }
+ }
+
+ render(h(App), root)
+ // async component has not been resolved
+ expect(serializeInner(root)).toBe('<!---->')
+
+ resolve!({
+ name: 'Foo',
+ data: () => ({ count: 0 }),
+ render() {
+ return h('p', this.count)
+ }
+ })
+
+ await timeout()
+ // resolved
+ expect(serializeInner(root)).toBe('<p>0</p>')
+
+ // change state + toggle out
+ instanceRef.value.count++
+ toggle.value = false
+ await nextTick()
+ expect(serializeInner(root)).toBe('<!---->')
+
+ // toggle in, state should be maintained
+ toggle.value = true
+ await nextTick()
+ expect(serializeInner(root)).toBe('<p>1</p>')
+ })
 })

packages/runtime-core/src/apiAsyncComponent.ts

@@ -13,6 +13,8 @@ import { defineComponent } from './apiDefineComponent'
 import { warn } from './warning'
 import { ref } from '@vue/reactivity'
 import { handleError, ErrorCodes } from './errorHandling'
+import { isKeepAlive } from './components/KeepAlive'
+import { queueJob } from './scheduler'
 
 export type AsyncComponentResolveResult<T = Component> = T | { default: T } // es modules
 
@@ -109,8 +111,14 @@ export function defineAsyncComponent<
  }
 
  return defineComponent({
- __asyncLoader: load,
  name: 'AsyncComponentWrapper',
+
+ __asyncLoader: load,
+
+ get __asyncResolved() {
+ return resolvedComp
+ },
+
  setup() {
  const instance = currentInstance!
 
@@ -174,6 +182,11 @@ export function defineAsyncComponent<
  load()
  .then(() => {
  loaded.value = true
+ if (instance.parent && isKeepAlive(instance.parent.vnode)) {
+ // parent is keep-alive, force update so the loaded component's
+ // name is taken into account
+ queueJob(instance.parent.update)
+ }
  })
  .catch(err => {
  onError(err)

packages/runtime-core/src/componentOptions.ts

@@ -189,6 +189,11 @@ export interface ComponentOptionsBase<
  * @internal
  */
  __asyncLoader?: () => Promise<ConcreteComponent>
+ /**
+ * the inner component resolved by the AsyncComponentWrapper
+ * @internal
+ */
+ __asyncResolved?: ConcreteComponent
  /**
  * cache for merged $options
  * @internal

packages/runtime-core/src/components/KeepAlive.ts

@@ -36,6 +36,7 @@ import {
 import { setTransitionHooks } from './BaseTransition'
 import { ComponentRenderContext } from '../componentPublicInstance'
 import { devtoolsComponentAdded } from '../devtools'
+import { isAsyncWrapper } from '../apiAsyncComponent'
 
 type MatchPattern = string | RegExp | string[] | RegExp[]
 
@@ -257,7 +258,15 @@ const KeepAliveImpl: ComponentOptions = {
 
  let vnode = getInnerChild(rawVNode)
  const comp = vnode.type as ConcreteComponent
- const name = getComponentName(comp)
+
+ // for async components, name check should be based in its loaded
+ // inner component if available
+ const name = getComponentName(
+ isAsyncWrapper(vnode)
+ ? (vnode.type as ComponentOptions).__asyncResolved || {}
+ : comp
+ )
+
  const { include, exclude, max } = props
 
  if (