vlambda博客
学习文章列表

大家好，我是哈默。

这篇文章我们研究一下 Vue 中的 Ajax 请求到底应该放在 created 里还是 mounted 里。

首先，我们先来看一下示例代码，如下:

我们简单介绍一下示例代码。

首先，我们定义了一个数据 list，默认是空数组。

然后，我们定义了一个 API 请求，getData。

最后，我们还定义了两个生命周期钩子 created 和 mounted。

首先我们先将请求放在 created 里，如下：

这个时候，我们是能够成功发送 API 请求获取到数据的，控制台会打印 created，mounted。

然后我们先将请求放在 mounted 里，如下：

这个时候，也能够成功发送 API 请求获取到数据的，并且控制台也会打印 created，mounted。

在进行深入分析之前，我们首先要知道一点：created 和 mounted 都是同步的，API请求是异步的。

我们可以来分析一下下面的这段代码：

在这里，首先会打印 created。

然后执行到 this.getData() 的时候，会发送 API 请求出去。注意，仅仅是发送了请求，请求并没有完成。这里可以类比 setTimeout，当我们 setTimeout(fn, 1000) 的时候，定时器 timer 会马上设置，但是 fn 并不会马上执行，而是 1 s 以后才可能执行。

然后，我们打印 mounted，此时通过 ulRef，获取 ul 里的内容，是空字符串，也就是 API 请求数据还没回来。

最后，当 mounted 也执行完了，所有同步代码执行完毕，请求的回调函数才会执行，最终将 data 赋值给 list 数据，并且触发 uptated，重新渲染组件，这部分代码如下：

总结一下，如果将 API 请求放到 created 里的话，实际上是这样一个过程：

created => API请求 => 获取数据 => 组件重新渲染

           => mounted => 组件首次渲染

也就是说，再发送 API 请求以后，就会产生 2 个分支，代码逻辑比较混乱。

放在 mounted 里的话，逻辑就会清晰很多，让我们来看一下如下的代码：

解释一下，首先我们会打印 created。

然后，我们会打印 mounted，组件会首次渲染。

接着，我们就会发送 API 请求，获取数据，得到数据以后，就会重新渲染组件。

可以看到整个逻辑是这样的：

created => mounted =>  组件首次渲染 => API请求 => 获取到数据 => 组件重新渲染

可以看到，没有分支，只有一个流程。

总结一下，哈默我是更倾向于放在 mounted 里，因为其实放在哪差别并不大，但是在 mounted 里整体逻辑会更清晰一点。