建議放在created里

created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。

mounted:在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

如果在mounted鉤子函數(shù)中請(qǐng)求數(shù)據(jù)可能導(dǎo)致頁(yè)面閃屏問題

其實(shí)就是加載時(shí)機(jī)問題，放在created里會(huì)比mounted觸發(fā)早一點(diǎn)，如果在頁(yè)面掛載完之前請(qǐng)求完成的話就不會(huì)看到閃屏了

補(bǔ)充知識(shí)：vue各階段數(shù)據(jù)可使用情況：created，computed，data，prop，mounted，methods，watch

created時(shí)，可用data和prop中的數(shù)據(jù)。

computed的屬性，當(dāng)在mounted或者dom中使用到時(shí)，才會(huì)屬性的執(zhí)行代碼。

最后是mouted，可使用前面的數(shù)據(jù)，并且此時(shí)才可以操作dom。

watch不會(huì)再創(chuàng)建階段自動(dòng)執(zhí)行，除了添加立即執(zhí)行這個(gè)配置項(xiàng)。

加載順序：

在官方文檔中，強(qiáng)調(diào)了computed區(qū)別于method最重要的兩點(diǎn)

computed是屬性調(diào)用，而methods是函數(shù)調(diào)用

computed帶有緩存功能，而methods不是

計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。

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

這就意味著只要 message 還沒有發(fā)生改變，多次訪問 computedTest計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

相比而言，只要發(fā)生重新渲染，method 調(diào)用總會(huì)執(zhí)行該函數(shù)。

調(diào)用

<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定義的方法我們是以屬性訪問的形式調(diào)用的，{{computedTest}}

但是methods定義的方法，我們必須要加上()來調(diào)用，如{{methodTest()}}，否則，視圖會(huì)出現(xiàn)test1的情況，見下圖

computed的緩存功能

在上面的例子中，methods定義的方法是以函數(shù)調(diào)用的形式來訪問的，那么test2-1,test2-2,test2-3是反復(fù)地將methodTest方法運(yùn)行了三遍，如果我們碰到一個(gè)場(chǎng)景，需要1000個(gè)methodTest的返回值，那么毫無疑問，這勢(shì)必造成大量的浪費(fèi)

更恐怖的是，如果你更改了message的值，那么這1000個(gè)methodTest方法每一個(gè)又會(huì)重新計(jì)算。。。。

所以，官方文檔才反復(fù)強(qiáng)調(diào)對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性

computed依賴于data中的數(shù)據(jù)，只有在它的相關(guān)依賴數(shù)據(jù)發(fā)生改變時(shí)才會(huì)重新求值

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

如上例，在Vue實(shí)例化的時(shí)候，computed定義computedTest方法會(huì)做一次計(jì)算，返回一個(gè)值，在隨后的代碼編寫中，只要computedTest方法依賴的message數(shù)據(jù)不發(fā)生改變，computedTest方法是不會(huì)重新計(jì)算的，也就是說test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新計(jì)算的結(jié)果。

這樣的好處也是顯而易見的，同樣的，如果我們碰到一個(gè)場(chǎng)景，需要1000個(gè)computedTest的返回值，那么毫無疑問，這相對(duì)于methods而言，將大大地節(jié)約內(nèi)存

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

computed的其它說明

computed其實(shí)是既可以當(dāng)做屬性訪問也可以當(dāng)做方法訪問

computed的由來有一個(gè)重要原因，就是防止文本插值中邏輯過重，導(dǎo)致不易維護(hù)

computed和watch

Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)：watch 屬性，在路由場(chǎng)景有使用：vue學(xué)習(xí)之router

當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)，你很容易濫用 watch，更好的想法是使用 computed 屬性而不是命令式的 watch 回調(diào)：

<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 
 }
 }
})

上面代碼是命令式的和重復(fù)的。將它與 computed 屬性的版本進(jìn)行比較：

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

當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，使用watch比較合適。

總之：盡量用computed計(jì)算屬性來監(jiān)視數(shù)據(jù)的變化，因?yàn)樗旧砭瓦@個(gè)特性，用watch沒有computed“自動(dòng)”，手動(dòng)設(shè)置使代碼變復(fù)雜。

以上這篇談一談vue請(qǐng)求數(shù)據(jù)放在created好還是mounted里好就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論