watch應(yīng)用場景

我想信圖片預(yù)加載大家肯定都有接觸過，當(dāng)圖片量大的時(shí)候，為了保證頁面圖片都加載出來的時(shí)候，我們才把主頁面給顯示出來，再進(jìn)行一些ajax請求，或者邏輯操作

那此時(shí)你用computed對這種監(jiān)聽一個數(shù)據(jù)然后進(jìn)行一系列邏輯操作和ajax請求，那watch再適合不過了，如果用computed的話那你連實(shí)現(xiàn)都實(shí)現(xiàn)不了，只有用watch監(jiān)聽

 <template>
 <div v-show=show>
  <img src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg" alt="">
  <img src="http://img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
  <img src="https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg" alt="">
  <img src="http://img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
 </div>
</template>
<script>
 export default {
  mounted () {
   var _this = this
   let imgs = document.querySelectorAll('img')
   console.log(imgs)
   Array.from(imgs).forEach((item)=>{
    let img = new Image()
    img.onload = ()=>{
     this.count++
    }
    img.src=item.getAttribute('src')
   })
  },
  data () {
   return {
    count : 0,
    show : false
   }
  },
  watch : {
   count (val,oldval) {
    if(val == 4){
     this.show = true
     alert("加載完畢")
     //然后可以對后臺發(fā)送一些ajax操作
    }
   }
  }
 }
</script>

我們可以發(fā)現(xiàn)發(fā)四張圖片都加載完畢的時(shí)候頁面才顯示出來

根據(jù)完方有一句話說的很重要的一句

雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個自定義的 watcher 。這是為什么 Vue 提供一個更通用的方法通過 watch 選項(xiàng)，來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí)，執(zhí)行異步操作或開銷較大的操作，這是很有用的。

基于這個官方的理解再總結(jié)我個人的整體理解。給出computed和watch的總結(jié)，記住這幾點(diǎn)的總結(jié)，在做項(xiàng)目的時(shí)候想想這些總結(jié)，選擇你的應(yīng)用方法

computed：

監(jiān)聽多個數(shù)據(jù)或者一個數(shù)據(jù)來維護(hù)返回一個狀態(tài)值 ，只要其中一個或多個數(shù)據(jù)發(fā)生了變化，則會從新計(jì)算整個函數(shù)體，從新返回狀態(tài)值

watch：

只有一個一個監(jiān)聽據(jù)，只要這個數(shù)據(jù)發(fā)生變化，就會在返回兩個參數(shù)，第一個是當(dāng)前的值，第二個是變化前的值，每當(dāng)變化的時(shí)候，則會觸發(fā)函數(shù)體的里的邏輯行為，來進(jìn)邏輯后續(xù)操作

以上這篇vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。