下面我就為大家分享一篇vue進行圖片的預載watch用法實例講解，具有很好的參考價值，希望對大家有幫助。
watch應用程式場景
我想信圖片預先載入大家一定都有接觸過，當圖片量大的時候，為了保證頁面圖片都載入出來的時候，我們才把主頁面給顯示出來，再進行一些ajax請求，或者邏輯操作
那此時你用computed對這種監聽一個數據然後進行一系列邏輯操作和ajax請求，那watch再適合不過了，如果用computed的話那你連實現都實現不了，只有用watch監聽
<template>
<p 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="">
</p>
</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用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
