曾经见过为了让钩子函数的异步代码可以同步执行，而对钩子函数使用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
{__ob__: Observer}
end created在mounted钩子执行完毕之后才打印，言外之意是使用async/await的钩子内部的异步代码并没有起到阻塞钩子主线程的执行。这里说的钩子函数的主线程是指：
beforeCreate => created => beforeMount => mounted => ...会写出以上代码的原因我估计有两个：
exp-01
正文
剖析一下
前言中针对代码的执行流程分析了一下，很明显没有如期望的顺序执行，我们先来回顾一下期望的顺序是什么
// step 1
created() {
// step 1.1
let endTime;
const startTime = Date.now();
console.log(`start created: ${startTime}ms`);
// step 1.2
this.list = await this.getList();
endTime = Date.now();
console.log(this.list);
console.log(`end created: ${endTime}ms, cost: ${endTime - startTime}ms`);
