[TOC]
### 1. 生命周期钩子函数理解
vue生命周期会按照 `beforeCreate`、`created`... 顺序进行，但生命周期钩子函数内部执行时可能不会按照顺序执行（在有异步代码执行时）
~~~
created() {
console.log(1);
this.testAsync();
},
mounted() {
console.log(3);
},
methods: {
testAsync() {
setTimeout(() => {
console.log(2);
}, 3000)
}
}
// 1 3 2
~~~
### 2. created 与 mounted 请求数据
由于 `created` 特性（data observer、watch/event 配置完成），它可以做些数据初始化，例如：获取配置文件数据、请求后台数据。只要不涉及到 `dom` 均可在此时执行，对于需要在可以获取到 `dom节点` 之后渲染数据的，可在 `mounted` 中执行，例如：绘制 `echarts` 图
~~~
created() {
this.getLocalData();
},
mounted() {
this.drawTest();
},
methods: {
async getLocalData() {
const config = await getLocalData();
this.config = config;
},
async drawTest() {
const res = await getDrawData();
const params = {
chartId: "draw-test",
dataX: res,
...
};
this.drawFunction(params);
},
drawFunction({ chartId, chartName, dataX, dataY, extra }) {
const myEchart = window.echarts.init(document.getElementById(chartId));
...
}
}
~~~
