vue中 APP.VUE与子组件的钩子函数执行顺序

Question

根据debbuger 会发现。APP.VUE会先执行完created mounted
然后才会根据路由路径将对应的组件加载到router-view中，
在执行子组件的created mounted。

不是说父子组件的钩子函数执行顺序是 父created-子created-子mounted-父mounted吗。

请问，APP.vue出现这样的执行顺序的源码在哪可以看到呢。

Answer 1

主要区别在于 router 中组件引用你用的是异步组件

同步组件时按你说的执行顺序是没问题的

异步组件时，父组件 mounted 过程中 子组件会先渲染成一个 占位符节点（仅在次异步子组件第一次加载时， 另外此处可以设置 异步组件 loading 组件）

此时异步加载子组件

父组件 mounted 执行（同步）

异步组件完成后 通知父组件更新

然后执行子组件 生命周期

Answer 2

main.js

  import Vue from 'vue'
        import App from './App'
        import router from './router'
        Vue.config.productionTip = false
            new Vue({
            router,
            render: h => h(App)
        }).$mount('#app')

route.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
var router = new Router({
  mode: 'history',
  base: "/",
  routes: [
    {
      path: '/',
      component: () => import('@/pages/index/index'),
      meta:{
        title:"首页",
      }
    },
    {
      path: '/test',
      component:  () => import('@/pages/test/index'),
      meta:{
        title:"test",
      }
    }

  ],
})
export default router

APP.VUE

    <template>
        <div id="app">
            <router-view   :key="$route.path"/>
        </div>
    </template>
    <script>
    export default {
        name: 'App',
        data(){
            return{
            }
        },
        created (){
            console.log('app.vue created')
        },
        mounted(){
            console.log('app.vue mouted')
        },

        watch:{
            $route:async function(to,from){
                console.log('watch route',to)
            },
        }
    }
    </script>
    

index.vue

    <template>
        <div class="" >
            这里是首页
        </div>
    </template>
    <script>
    export default {
        name: "Index",
        data() {
        },
        created() {
           console.log('index- create')
        },
        mounted() {
            console.log('index- mouted')
        },
    };
    </script>

最后输出是
*
app.vue created
app.vue mouted
watch route {name: undefined, meta: {…}, path: "/", hash: "", query: {…}, …}
index- create
index- mouted*

第二次编辑：

我刚实验了一下，我的代码应该是异步组件。

异步组件是app-created app-mounted index-created index-mounted

而同步组件是app-created-index-created -index-mounted- app-mounted

应该是这样吧