Vue的钩子函数受async控制么?父子组件加载异常.

Vue生命周期中的钩子函数会阻塞执行么?

答案应该是否定的.
开发中我遇到了一个问题.

<Father>
	<son-1 :data="formdata"/>
	<son-2 :data="formdata"/>
	<son-3 :data="formdata"/>
</Father>

简单的一父三子结构.
按照Vue的说明:

此刻会先执行 的Create,然后才是三个孩子的Create.
三个的Create的执行,是需要依赖formdata数据的.
而formdata是由父组件提供的.
但是父组件的formdata也需要加载.且加载是一个异步操作.
我尝试在父组件的Create方法中去请求数据.
但是子组件Create都报错了.
没有数据.

通过调试发现.
父组件Create方法的异步请求还没结束.子组件的Create就执行了.
不了解真像的我.天真的认为,给父组件的Create方法前加上async.然后给异步请求前加上await就可以了.
但,并没有什么卵用.

依然是不等父组件的Create执行完,子组件的Create就执行了.

所以猜测是:

父Created
子Created

而不是

await 父Created
await 子Created

换言之.你给你的父组件加上async,Vue生命周期内也不会使用await方式调用.

那生命周期的钩子函数是不是就不能加async?
不是的,虽然声明周期执行过程中不会被await调用.但钩子本身自己还是会受到async执行.

单个钩子函数内部可以顺序执行.

那么我们怎么解决子组件加载的问题.那就是flag的方式.在父组件中加入flag标志位为flase.
当父组件加载完成数据后,在将flag置为true.

子组件使用v-if=flag的方式.即可解决问题.

这是源于v-if命令的特性.他是在为真的时候才去加载并挂载到父组件上.

所以,什么时候flag为真,什么时候才会加载.什么时候加载,什么时候组件的Created方法才会被执行.

这样就能保证父子组件的Created方法是完全有序执行的了.