组件懒加载导致的生命周期钩子触发顺序变化有两个几乎一模一样的组件，然而在加载的时候却产生了不同的效果。排查了个把小时才发

有两个几乎一模一样的组件，然而在加载的时候却产生了不同的效果。排查了个把小时才发现是组件懒加载导致的，记录一下防止下次遇见又愣神。

先从简单开始讲起，有两个页面，其中 parent1 没用懒加载，parent2 加载子组件使用了懒加载。

// parent1
<template>
  <SyncChild />
</template>
<script>
import SyncChild from 'xxx'
export default {
  name: 'SyncParent',
  components: { SyncChild },
  mounted() {
    console.log('parent1 mounted')
  },
}
</script>

// SyncChild
<template>
  xxx
</template>
<script>
export default {
  name: 'SyncChild',
  mounted() {
    console.log('sync child mounted')
  },
}
</script>

// 页面刷新log顺序如下
// sync child mounted
// parent1 mounted

正常页面生命周期钩子触发的顺序是: 父组件beforeCreated -> 父组件created -> 子组件beforeCreated -> 子组件created -> 子组件mounted -> 父组件mounted，同步组件的加载子组件的mounted先于父组件。

// parent2
<template>
  <AsyncChild />
</template>
<script>
export default {
  components: {
    AsyncChild: () => import('xxx')
  },
  mounted() {
    console.log('parent2 mounted')
  },
}
</script>

// AsyncChild
<template>
  xxx
</template>
<script>
export default {
  name: 'AsyncChild',
  mounted() {
    console.log('async child mounted')
  },
}
</script>

// 页面刷新log顺序如下
// parent2 mounted
// async child mounted

页面首次加载时，由于使用了子组件懒加载，导致父组件渲染时子组件还未加载完。所以此时页面生命周期钩子触发的顺序是：父组件beforeCreated -> 父组件created -> 父组件mounted -> 异步子组件beforeCreated -> 异步子组件created -> 异步子组件mounted，异步子组件都是在父组件加载完后才开始加载的。如果页面已经加载过了，因为内存已经缓存子组件，所以此时异步子组件就变成了同步子组件，再次路由跳转到 parent2 的时候生命周期就和 parent1 逻辑一样了。

如果加入了 keep-alive 会是怎么样呢？

假如我在app.vue中使用了keep-alive组件：

<keep-alive>
  <router-view />
</keep-alive>

此时给同步组件分别加上 activated 生命周期钩子:

// parent1
<template>
  <SyncChild />
</template>
<script>
import SyncChild from 'xxx'
export default {
  components: { SyncChild },
  mounted() {
    console.log('parent1 mounted')
  },
  activated() {
    console.log('parent1 activated')
  },
}
</script>

// SyncChild
<template>
  xxx
</template>
<script>
export default {
  name: 'SyncChild',
  mounted() {
    console.log('sync child mounted')
  },
  activated() {
    console.log('sync child activated')
  },
}
</script>

// 页面刷新log顺序如下
// sync child mounted
// parent1 mounted
// sync child activated
// parent1 activated

此时父子组件的生命周期都正常触发了，且子组件在前父组件在后。

异步组件加上 activated 生命周期钩子:

// parent2
<template>
  <AsyncChild />
</template>
<script>
export default {
  components: {
    AsyncChild: () => import('xxx')
  },
  mounted() {
    console.log('parent2 mounted')
  },
  activated() {
    console.log('parent2 activated')
  },
}
</script>

// AsyncChild
<template>
  xxx
</template>
<script>
export default {
  name: 'AsyncChild',
  mounted() {
    console.log('async child mounted')
  },
  activated() {
    console.log('async child activated')
  },
}
</script>

// 页面刷新log顺序如下
// parent2 mounted
// parent2 activated
// async child mounted

此时父组件钩子先触发，然后才是子组件。而且子组件的 activated 钩子并没有触发。

首次加载时异步子组件的 mounted 会最后触发，因为异步组件需要下载。

异步子组件的 activated 并没有触发，这是因为子组件加载时父组件已经加载完成，此时并不知道是否是页面初次加载（因为子组件也可能是 v-if 等加载的）。没仔细看源码大概是在页面加载时会把 activated 等钩子收集起来待时触发，而收集钩子的时候异步子组件还没有下载完所以没收集到吧。

页面加载过后，再次路由跳转时异步子组件的 activated 触发顺序就和同步的没区别了。