vue3父子组件生命周期钩子函数执行顺序

1,629 阅读1分钟

基本执行顺序

示例代码 image.png image.png 模板渲染阶段:

image.png 从外到内---从内到外

更新:如果只更新父组件状态 parent---onBeforeUpdate parent---onUpdated 如果父子间将自己的状态传递给了子组件,则父组件状态变化时

image.png

异步数据问题

如果父组件需要发起异步请求,获取数据后,再以props传递给子组件 一步一步来,先在父组件里写下如下代码

image.png 执行结果 image.png 可以看到,由于要从父组件给子组件传递props,所以需要在父组件的beforeMount或beforeMount阶段发起数据请求,这里有个问题,就是还没等消息回来,子组件的渲染仍在进行,这时候如果直接给子组件传递props肯定是会出问题的 所以正确的做法应该是,子组件中要对props做简单判断再使用,因为在渲染阶段会拿到非法的值 还有一种办法是使用异步组件,这里保留以后再探讨