Vue Ajax 請求到底應該放在 created 里還是 mounted 里

1 先放在 created 里

首先我們先將請求放在 created 里，如下：

created(){
  console.log('created');
  this.$store.dispatch('getDetail', 11);
},
mounted(){
  console.log('mounted');
}

這個時候，我們是能夠成功發送 API 請求獲取到數據的，控制台會打印 created，mounted。

2 再放在 mounted 里

然后我們先將請求放在 mounted 里，如下：

created(){
  console.log('created');
},
mounted(){
  console.log('mounted');
  this.$store.dispatch('getDetail', 11);
}

這個時候，也能夠成功發送 API 請求獲取到數據的，並且控制台也會打印 created，mounted。

3 分析在 created 里的情況

在進行深入分析之前，我們首先要知道一點：created 和 mounted 都是同步的，API請求是異步的。
我們可以來分析一下下面的這段代碼：

<template>
  <div>
	//用於觸發updated函數
    <div @click="b++">{{ b }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      b: 0
    };
  },
  computed: {
    ajaxData() {
      return this.$store.state.Detail.detailInfo;
    }
  },
  created() {
    console.log('created');
    this.$store.dispatch('getDetail', 11);
  },
  mounted() {
    console.log('mounted');
    console.log(this.ajaxData);
    console.log('mounted2');
  },
  updated() {
    console.log(this.ajaxData);
    console.log('updated');
  },


created
mounted
{__ob__: Observer}//空{}
mounted2
//點擊div觸發updated鈎子函數
{…}
updated

1 在這里，首先會打印 created。

2 然后執行到this.$store.dispatch('getDetail', 11) 的時候，會發送 API 請求出去。注意，僅僅是發送了請求，請求並沒有完成。這里可以類比 setTimeout，當我們 setTimeout(fn, 1000) 的時候，定時器 timer 會馬上設置，但是 fn 並不會馬上執行，而是 1 s 以后才可能執行。

3 然后，我們打印 mounted

4 此時打印ajaxData，是空字符串，也就是 API 請求數據還沒回來。

5 之后打印mounted2

6 最后，當 mounted 也執行完了，所有同步代碼執行完畢，請求的回調函數才會執行，最終將 this.$store.state.Detail.detailInfo賦值給 ajaxData 數據，並且觸發 uptate(這個update不是我們寫的鈎子函數)，重新渲染組件

7 //點擊div觸發updated鈎子函數, 可以看到{…}updated, 異步函數確實執行完畢了.

4 總結一下，如果將 API 請求放到 created 里的話，實際上是這樣一個過程：

也就是說，再發送 API 請求以后，就會產生 2 個分支，代碼邏輯比較混亂。

5 再來分析 mounted 里的情況

可以看到整個邏輯是這樣的：
created => mounted =>  mounte組件首次渲染 => API請求 => 獲取到數據 => update組件重新渲染

可以看到，沒有分支，只有一個流程。