在 Vue 中,父组件与子组件的加载顺序?
步骤:
- 解析父组件模板:Vue 首先解析父组件的模板,并创建父组件实例。
- 解析子组件标签:当解析到父组件模板中的子组件标签时,Vue 开始解析子组件的模板,并创建子组件实例。
- 子组件挂载前钩子函数:在子组件实例创建之后,但在子组件挂载到 DOM 之前,Vue 调用子组件的
beforeMount
钩子函数。 - 父组件挂载前钩子函数:当所有子组件的
beforeMount
钩子函数执行完毕后,Vue 调用父组件的beforeMount
钩子函数。 - 子组件挂载:子组件开始挂载到 DOM 上,此时会触发子组件的生命周期钩子函数,包括
mounted
。 - 父组件挂载:当子组件都挂载完成后,父组件才会继续挂载到 DOM 上,同时触发父组件的生命周期钩子函数,包括
mounted
。
总结起来,父组件会在子组件之前加载,并且父组件的挂载过程会在子组件的挂载过程之前完成。这样确保了在父组件中可以正确地使用子组件,并保证了组件的生命周期钩子函数按照正确的顺序执行。
在 Vue 中,父组件和子组件的生命周期函数按照以下顺序执行:
- 父组件:
beforeCreate
- 父组件:
created
- 父组件:
beforeMount
- 子组件:
beforeCreate