01.vue生命周期函数

1.created：数据初始化阶段

在这个阶段，Vue 已经完成了数据监测（Observer）和事件初始化。

你能做的：调用 API 获取后端数据，初始化页面所需的变量。
你不能做的：使用 document.getElementById 或者 this.$refs。因为此时 HTML 还没生成，就像房子还没盖好，你没法进去装修。

created() {
  console.log(this.colors); // √ 可以获取 data 里的颜色数组
  // 适合发送网络请求
  this.fetchData();
}

2.mounted：DOM 渲染完成阶段

在这个阶段，Vue 已经把模板编译成了真实的 HTML 并插入到了页面中。

你能做的：所有在 created 能做的事，加上操作 DOM。

3.那么请求后端数据用哪个呢？

虽然在 mounted 里发请求也能成功，但选择 created 是行业内的最佳实践，原因如下：

速度更早：created 在生命周期中比 mounted 更早触发。由于网络请求是异步的，越早发送请求，用户看到数据的时间就越短，能减少页面的白屏或等待感。

无需操作 DOM：获取数据通常只是为了给 data 里的变量赋值（比如 this.list = response.data），这个过程不需要网页节点（DOM）参与，所以没必要等到 mounted 阶段。

什么时候必须选 mounted？

只有在你的请求依赖于 DOM 节点时，才必须用 mounted。例如：

你需要根据某个 div 的真实宽度来告诉后端返回多大的图片。

你需要获取 Canvas 对象后再去请求一些特定的图形数据。