Subscribe on changes!

activated hook is not called when using defineAsyncComponent

avatar
Dec 12th 2021

Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Just opening the SFC playground link

<script>
import {
  defineAsyncComponent,
  defineComponent,
  reactive,
} from 'vue'
import Comp from './Comp.vue'
  
const AsyncComp = defineAsyncComponent(() => Promise.resolve(Comp));

export default defineComponent({
  components: {
    Comp,
    AsyncComp,
  },
  setup () {
    const received = reactive({})
    
    return {
      received,
      
      Comp, 
      AsyncComp,
    }
  },
})
</script>

<template>
  <div>C:{{ received }}</div>

  <keep-alive>
     <Comp @activated="received.comp = true" />
  </keep-alive>
  <keep-alive>
    <AsyncComp @activated="received.asyncComp = true" />
  </keep-alive>
  
  
  <keep-alive>
     <component :is="Comp" @activated="received.comp2= true" />
  </keep-alive>
  <keep-alive>
    <component :is="AsyncComp" @activated="received.asyncComp2= true" />
  </keep-alive>
</template>

What is expected?

Is expected that the activate hook will also run on the AsyncDynamicComponent child

What is actually happening?

Not being called


Not sure if this behaviour is intended, but it differs from vue 2.x