在实际项目中遇到了一种情况,就是页面的选择框是在页面一创建时就得创建,因此显然是需要写在created()钩子函数中的。然后在项目中,这里选择框中的具体选择项不是固定的,而是从服务器请求过来的,因此需要涉及到异步请求的问题,也就是说要用到async/await,所以这里不再是created,而是async created(),这时候父子组件的执行顺序就发生了改变。下面通过简单的例子来对比输出结果。
1、首先来看看不加异步情况下的结果:
由控制台可以看出,先执行完了父组件的created()后再去执行子组件的created()。这里v-if="pM"目前无任何影响。
2、当加上了异步,但是不加v-if="pM"时:
可以看出,这里父组件async created()中的代码还未执行完(异步代码还未执行)就去执行子组created()中的代码了,也就是说先执行完父组件async created()中的同步代码,然后去执行子组件created()中的代码,最后再执行父组件中的异步代码。这样显然是不合适的,父组件异步代码还未执行,子组件自然也就拿不到值,所以输出为null。
3、当加上了异步,并且加上v-if="pM"时:
可以看到,当加上v-if="pM"后,只有父组件async created()中的异步代码执行完,将值给到pM后,子组件才会执行。因此可以看出执行顺序又回到了刚开始时,"先执行完父组件的created()"中的代码再执行子组件created()中的代码。为什么这里会加引号,因为准确来说也不能是执行完父组件async created()中的代码(同步+异步),而是子组件中要用到父组件async created()中异步代码的返回值,保证这部分异步代码执行完,才能去执行子组件的created()。