Vue コンポーネントの初期化でアクティブ化された分析が実行されないのはなぜですか?

前提条件: コンポーネントはキープアライブタグを通じてキャッシュされます。

問題の説明: ページが初期化されるとき、つまりページが初めて開かれるとき、またはブラウザが更新されるとき、親コンポーネントが作成され、アクティブ化されて実行されます。

サブコンポーネントは作成されただけで実行されますが、アクティブ化されていません

結論: ページの初期化時にサブコンポーネントはロードされません。代わりに、非同期リクエストメソッドを使用して、v-if を通じてコンポーネントをロードするかどうかを制御します。これにより、ページの親コンポーネントがロードされたときにサブコンポーネントがレンダリングを開始します。初期化されているため、サブコンポーネントは実行されません。コンポーネントのアクティブ化されたフック関数

Post-Delay 関数が新しい Promise 関数に置き換えられた後、子コンポーネントの初期化時にアクティブ化が実行されるようになったので、親コンポーネントがアクティブ化を実行する前に子コンポーネントをレンダリングし、子コンポーネントのアクティブ化を実行できると弱く考えています。初期化中にトリガーされます。

<template>
  <div id="app">
   <keep-alive>
     <router-view/>
   </keep-alive>    
  </div>
</template>

//父组件
<template>
  <div class="about">
    父组件   
    <child-cpn v-if='show'></child-cpn>
  </div>
</template>
<script>
import ChildCpn from './ChildCpn'
export default{
  name:'AboutView',
  components:{
    ChildCpn
  },
  data(){
    return{
      show:false
    }
  },
  created(){
   console.log('父组件created被执行')
   setTimeout(()=>{
    this.show=true//模拟异步获取后处理逻辑，此处控制子组件是否渲染
   },1000)   
  },
  activated(){ 
    console.log('父组件的activated')//经验证初始化时都会执行activated    
  }
}

//子组件
<template>
    <div class="about">
      我是子组件
    </div>
</template>
<script>
export default{
    name:'AboutView',

    created(){
      this.show=true   
      console.log('子组件的created')//初始化时都会执行
   },
   activated(){    
    //初始化时不会执行这行，但是从别的页面过来时 总之组件已经缓存后才会执行     
     console.log('子组件的activated')
  },
}
</script>

Vue コンポーネントの初期化でアクティブ化された分析が実行されないのはなぜですか?

おすすめ