面试题：Vue动态加载组件生命周期钩子复杂场景

Question

假设你有一个父组件通过v - if动态加载子组件，子组件内部又通过异步数据获取来初始化自身数据。请描述从父组件触发动态加载开始，到子组件数据获取完成并渲染这一过程中，所有相关Vue生命周期钩子的触发顺序，并解释为何会这样触发。

Answer 1

1. 触发顺序：
   • 父组件beforeCreate
   • 父组件created
   • 父组件beforeMount
   • 当v - if条件为真，开始加载子组件：
     • 子组件beforeCreate
     • 子组件created
     • 子组件beforeMount
     • 子组件mounted
   • 父组件mounted
   • 子组件异步数据获取完成：
     • 子组件updated
2. 解释：
   • 父组件生命周期先启动：
     • 父组件在初始化时，按照beforeCreate（此时组件实例刚被创建，数据观测和事件机制未初始化）、created（数据观测和事件机制已初始化，可访问数据和方法，但DOM未挂载）、beforeMount（虚拟DOM已创建完成，即将挂载到真实DOM）的顺序执行。
   • 子组件加载时生命周期执行：
     • 当v - if条件满足，开始创建子组件实例。子组件同样按照beforeCreate、created、beforeMount的顺序执行，在mounted钩子中，子组件已经挂载到真实DOM，此时子组件完成挂载。
   • 父组件挂载完成：
     • 子组件挂载完成后，父组件继续执行mounted钩子，此时父组件挂载到真实DOM。
   • 子组件数据更新：
     • 子组件异步获取数据，数据更新后会触发updated钩子，因为数据变化导致组件重新渲染。