watch應(yīng)用場(chǎng)景

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

那此時(shí)你用computed對(duì)這種監(jiān)聽一個(gè)數(shù)據(jù)然后進(jìn)行一系列邏輯操作和ajax請(qǐng)求，那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("加載完畢")
     //然后可以對(duì)后臺(tái)發(fā)送一些ajax操作
    }
   }
  }
 }
</script>

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

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

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

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

computed：

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

watch：

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

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