在vue中預先載入watch用法

下面我就為大家分享一篇vue進行圖片的預載watch用法實例講解，具有很好的參考價值，希望對大家有幫助。

watch應用程式場景

我想信圖片預先載入大家一定都有接觸過，當圖片量大的時候，為了保證頁面圖片都載入出來的時候，我們才把主頁面給顯示出來，再進行一些ajax請求，或者邏輯操作

那此時你用computed對這種監聽一個數據然後進行一系列邏輯操作和ajax請求，那watch再適合不過了，如果用computed的話那你連實現都實現不了，只有用watch監聽

 <template>
 <p v-show=show>
  <img src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg"  class="lazy"   alt="">
  <img src="/static/imghwm/default1.png"  data-src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp"  class="lazy"   alt="">
  <img src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg"  class="lazy"   alt="">
  <img src="/static/imghwm/default1.png"  data-src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp"  class="lazy"   alt="">
 </p>
</template>
<script>
 export default {
  mounted () {
   var _this = this
   let imgs = document.querySelectorAll(&#39;img&#39;)
   console.log(imgs)
   Array.from(imgs).forEach((item)=>{
    let img = new Image()
    img.onload = ()=>{
     this.count++
    }
    img.src=item.getAttribute(&#39;src&#39;)
   })
  },
  data () {
   return {
    count : 0,
    show : false
   }
  },
  watch : {
   count (val,oldval) {
    if(val == 4){
     this.show = true
     alert("加载完毕")
     //然后可以对后台发送一些ajax操作
    }
   }
  }
 }
</script>

我們可以發現發四張圖片都加載完畢的時候頁面才顯示出來

根據完方有一句話說的很重要的一句話

#雖然計算屬性在大多數情況下更合適，但有時也需要一個自訂的watcher 。這就是為什麼 Vue 提供一個更通用的方法透過 watch 選項，來回應資料的變化。當你想要在資料變化回應時，執行非同步操作或開銷較大的操作，這是很有用的。

基於這個官方的理解再總結我個人的整體理解。給予computed和watch的總結，記住這幾點的總結，在做專案的時候想想這些總結，選擇你的應用方法

##computed：

監聽多個資料或一個資料來維護傳回一個狀態值，只要其中一個或多個資料發生了變化，則會從新計算整個函數體，從新傳回狀態值

watch：

只有一個一個監聽據，只要這個資料發生變化，就會在傳回兩個參數，第一個是目前的值，第二個是變化前的值，每當變化的時候，則會觸發函數體的里的邏輯行為，來進邏輯後續操作

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

詳解講解使用jest測試react native組件

在vue中全選實現資料的綁定及獲取

在mint-ui中使用時間外掛程式及取得選擇值#

以上是在vue中預先載入watch用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！