本文详细分析了在Vue中使用async/await时，created钩子内的异步代码并未按预期同步执行的原因，解释了JavaScript的事件循环和任务队列机制。尽管async/await在一定程度上提供了同步感，但实际处理逻辑仍会被添加到任务队列并在主线程执行完毕后执行。提出了解决方案——使用beforeRouteEnter路由守卫来阻塞组件渲染，确保数据加载完成后再进行渲染，同时讨论了如何通过loading提示优化用户体验。
曾经见过为了让钩子函数的异步代码可以同步执行，而对钩子函数使用async/await，就好像下面的代码：
// exp-01
export default {
async created() {
const timeKey = 'cost';
console.time(timeKey);
console.log('start created');
this.list = await this.getList();
console.log(this.list);
console.log('end created');
console.timeEnd(timeKey);
},
mounted() {
const timeKey = 'cost';
console.time(timeKey);
console.log('start mounted');
console.log(this.list.rows);
console.log('end mounted');
console.timeEnd(timeKey);
},
data() {
return {
list: []
};
},
methods: {
getList() {
return new Promise((resolve) => {
setTimeout(() => {
return resolve({
rows: [
{ name: 'isaac', position: 'coder' }
]
});
}, 3000);
});
}
}
};
exp-01 的代码最后会输出：
start created
start mounted
undefined
end mounted
mounted cost: 2.88623046875ms
{__ob__: Observer}
end created
created cost: 3171.545166015625ms
很明显没有达到预期的效果，为什么？
根据 exp-01 的输出结果，可以看出代码的执行顺序，首先是钩子的执行顺序：
created => mounted
是的，钩子的执行顺序还是正常的没有被打乱，证据就是：created钩子中的同步代码是在mounted先执行的：
start created
start mounted
再看看created钩子内部的异步代码：
this.list = await this.getList();
可以看见this.list的打印结果
end mounted
mounted cost: 2.88623046875ms
// 这是created钩子打印的this.list
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
