Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.6k views
in Technique[技术] by (71.8m points)

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

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

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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

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

此时异步加载子组件

父组件 mounted 执行(同步)

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

然后执行子组件 生命周期

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...