watch應(yīng)用場景

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

那此時(shí)你用computed對這種監(jiān)聽一個(gè)數(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("加載完畢")     //然后可以對后臺(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è)參考，也希望大家多多支持武林網(wǎng)。