這篇文章主要介紹VUE中狀態(tài)控制與延時(shí)加載刷新的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供湖口網(wǎng)站建設(shè)、湖口做網(wǎng)站、湖口網(wǎng)站設(shè)計(jì)、湖口網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、湖口企業(yè)網(wǎng)站模板建站服務(wù)，十年湖口做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

在實(shí)際項(xiàng)目中，我們經(jīng)常會(huì)遇到這種狀況，某些數(shù)據(jù)我們希望等到需要的時(shí)候再去獲取，或者某些數(shù)據(jù)我們需要刷新，但是不必立刻刷新，而是延時(shí)到展示的時(shí)候再去刷新。

在DOM操作的年代，想要實(shí)現(xiàn)這樣的功能可能會(huì)稍微麻煩一些，然而當(dāng)我們使用數(shù)據(jù)驅(qū)動(dòng)的mv*框架的時(shí)候，這個(gè)想要實(shí)現(xiàn)這個(gè)需求就容易了許多。

當(dāng)我們理解數(shù)據(jù)驅(qū)動(dòng)時(shí)，我們很容易想到將需要刷新的狀態(tài)也設(shè)置成為某個(gè)數(shù)據(jù)，在需要刷新的地方watch這個(gè)數(shù)據(jù)，當(dāng)刷新?tīng)顟B(tài)發(fā)生變動(dòng)的時(shí)候，watch生效并執(zhí)行刷新的方法，這就實(shí)現(xiàn)了延時(shí)刷新。而且我們不再需要關(guān)注延時(shí)的過(guò)程，只需要更改刷新?tīng)顟B(tài)就可以了。

現(xiàn)在我們用Vue來(lái)實(shí)現(xiàn)一個(gè)狀態(tài)驅(qū)動(dòng)的延時(shí)刷新。

首先我們利用vue的混合來(lái)實(shí)現(xiàn)一個(gè)統(tǒng)一的刷新接口，你可以把混合理解成一種特殊的繼承來(lái)使用。

//刷新mixin
var refreshMixin = {
  props: ['refresh'],
  watch: {
    //狀態(tài)監(jiān)視
    'refresh': function (val) {
      //console.log(val)
      //刷新列表
      val && this.refreshData()
    },
  },
  created: function () {
    this.refresh && this.refreshData()
  },
}

在這個(gè)refreshMixin中，當(dāng)組建創(chuàng)建或者refresh狀態(tài)發(fā)生變更時(shí)，判斷狀態(tài)是否是true，如果是true，則調(diào)用組建的refreshData方法。

我們?cè)诮M建當(dāng)中混合這個(gè)refreshMixin，并且實(shí)現(xiàn)refreshData方法，就可以實(shí)現(xiàn)狀態(tài)驅(qū)動(dòng)刷新。

注意，refresh狀態(tài)使用雙向綁定，并且在調(diào)用refreshData方法時(shí)立刻將refresh狀態(tài)置為false，以便下次調(diào)用。

下面給予一個(gè)完整的demo

  
  
  


  
    
    刷新組件數(shù)據(jù)