vue進行圖片的預先載入watch用法執行個體講解，

vue進行圖片的預先載入watch用法執行個體講解，

watch應用情境

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

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

 <template> <div v-show=show>  <img src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg" alt="">  <img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">  <img src="https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg" alt="">  <img src="//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("載入完畢")     //然後可以對後台發送一些ajax操作    }   }  } }</script>

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

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

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

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

computed：

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

watch：

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

以上這篇vue進行圖片的預先載入watch用法執行個體講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。