建議放在created裡

created:在模板渲染成html前呼叫，即通常初始化某些屬性值，然後再渲染成檢視。

mounted:在模板渲染成html後呼叫，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。

如果在mounted鉤子函式中請求資料可能導致頁面閃屏問題

其實就是載入時機問題，放在created裡會比mounted觸發早一點，如果在頁面掛載完之前請求完成的話就不會看到閃屏了

補充知識：vue各階段資料可使用情況：created，computed，data，prop，mounted，methods，watch

created時，可用data和prop中的資料。

computed的屬性，當在mounted或者dom中使用到時，才會屬性的執行程式碼。

最後是mouted，可使用前面的資料，並且此時才可以操作dom。

watch不會再建立階段自動執行，除了新增立即執行這個配置項。

載入順序：

在官方文件中，強調了computed區別於method最重要的兩點

computed是屬性呼叫，而methods是函式呼叫

computed帶有快取功能，而methods不是

計算屬性是基於它們的依賴進行快取的，只有在它的相關依賴發生改變時才會重新求值。

let vm = new Vue({
 el: '#app',data: {
  message: '我是訊息，'
 },methods: {
  methodTest() {
   return this.message + '現在我用的是methods'
  }
 },computed: {
  computedTest() {
   return this.message + '現在我用的是computed'
  }
 }
})

這就意味著只要 message 還沒有發生改變，多次訪問 computedTest計算屬性會立即返回之前的計算結果，而不必再次執行函式。

相比而言，只要發生重新渲染，method 呼叫總會執行該函式。

呼叫

<div id="app">
 <h1>{{message}}</h1>
 <p class="test1">{{methodTest}}</p>
 <p class="test2-1">{{methodTest()}}</p>
 <p class="test2-2">{{methodTest()}}</p>
 <p class="test2-3">{{methodTest()}}</p>
 <p class="test3-1">{{computedTest}}</p>
 <p class="test3-2">{{computedTest}}</p>
</div>

在HTML的插值裡

computed定義的方法我們是以屬性訪問的形式呼叫的，{{computedTest}}

但是methods定義的方法，我們必須要加上()來呼叫，如{{methodTest()}}，否則，檢視會出現test1的情況，見下圖

computed的快取功能

在上面的例子中，methods定義的方法是以函式呼叫的形式來訪問的，那麼test2-1,test2-2,test2-3是反覆地將methodTest方法運行了三遍，如果我們碰到一個場景，需要1000個methodTest的返回值，那麼毫無疑問，這勢必造成大量的浪費

更恐怖的是，如果你更改了message的值，那麼這1000個methodTest方法每一個又會重新計算。。。。

所以，官方文件才反覆強調對於任何複雜邏輯，你都應當使用計算屬性

computed依賴於data中的資料，只有在它的相關依賴資料發生改變時才會重新求值

let vm = new Vue({
 el: '#app',computed: {
  computedTest() {
   return this.message + '現在我用的是computed'
  }
 }
})

如上例，在Vue例項化的時候，computed定義computedTest方法會做一次計算，返回一個值，在隨後的程式碼編寫中，只要computedTest方法依賴的message資料不發生改變，computedTest方法是不會重新計算的，也就是說test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新計算的結果。

這樣的好處也是顯而易見的，同樣的，如果我們碰到一個場景，需要1000個computedTest的返回值，那麼毫無疑問，這相對於methods而言，將大大地節約記憶體

哪怕你改變了message的值，computedTest也只會計算一次而已

computed的其它說明

computed其實是既可以當做屬性訪問也可以當做方法訪問

computed的由來有一個重要原因，就是防止文字插值中邏輯過重，導致不易維護

computed和watch

Vue 提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動：watch 屬性，在路由場景有使用：vue學習之router

當你有一些資料需要隨著其它資料變動而變動時，你很容易濫用 watch，更好的想法是使用 computed 屬性而不是命令式的 watch 回撥：

<div id="demo">{{ fullName }}</div>

var vm = new Vue({ 
 el: '#demo',data: { 
 　　firstName: 'Foo',lastName: 'Bar',　fullName: 'Foo Bar'
 },watch: { 
 firstName: function (val) { 
  this.fullName = val + ' ' + this.lastName 
 },lastName: function (val) {  
　　this.fullName = this.firstName + ' ' + val 
 }
 }
})

上面程式碼是命令式的和重複的。將它與 computed 屬性的版本進行比較：

var vm = new Vue({ 
　　el: '#demo',　　data: { 
　　　　firstName: 'Foo',　　　　lastName: 'Bar' 
　　},　　computed: { 
　　　　fullName: function () {  
　　　　　　　　return this.firstName + ' ' + this.lastName 
　　　　} 
　　}
})

當需要在資料變化時執行非同步或開銷較大的操作時，使用watch比較合適。

總之：儘量用computed計算屬性來監視資料的變化，因為它本身就這個特性，用watch沒有computed“自動”，手動設定使程式碼變複雜。

以上這篇談一談vue請求資料放在created好還是mounted裡好就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。