vue進行圖片的預加載watch用法實例講解
watch應用場景
我想信圖片預加載大家肯定都有接觸過，當圖片量大的時候，為了保證頁面圖片都加載出來的時候，我們才把主頁面給顯示出來，再進行一些ajax請求，或者邏輯操作
那此時你用computed對這種監(jiān)聽一個數(shù)據(jù)然后進行一系列邏輯操作和ajax請求，那watch再適合不過了，如果用computed的話那你連實現(xiàn)都實現(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ā)四張圖片都加載完畢的時候頁面才顯示出來
根據(jù)完方有一句話說的很重要的一句
雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的 watcher 。這是為什么 Vue 提供一個更通用的方法通過 watch 選項，來響應數(shù)據(jù)的變化。當你想要在數(shù)據(jù)變化響應時，執(zhí)行異步操作或開銷較大的操作，這是很有用的。
基于這個官方的理解再總結我個人的整體理解。給出computed和watch的總結，記住這幾點的總結，在做項目的時候想想這些總結，選擇你的應用方法
computed：
監(jiān)聽多個數(shù)據(jù)或者一個數(shù)據(jù)來維護返回一個狀態(tài)值 ，只要其中一個或多個數(shù)據(jù)發(fā)生了變化，則會從新計算整個函數(shù)體，從新返回狀態(tài)值
watch：
只有一個一個監(jiān)聽據(jù)，只要這個數(shù)據(jù)發(fā)生變化，就會在返回兩個參數(shù)，第一個是當前的值，第二個是變化前的值，每當變化的時候，則會觸發(fā)函數(shù)體的里的邏輯行為，來進邏輯后續(xù)操作
以上這篇vue進行圖片的預加載watch用法實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue使用swiper插件實現(xiàn)垂直輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3 defineExpose要在方法聲明定義以后使用的教程
這篇文章主要介紹了Vue3 defineExpose要在方法聲明定義以后使用的教程,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
混入可以省很多代碼(高類聚低耦合),還方便維護,下面這篇文章主要給大家介紹了關于vuejs中使用mixin局部混入/全局混入的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)多圖添加顯示和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Vue?使用postMessage?實現(xiàn)父子跨域通信
這篇文章主要介紹了Vue應用?postMessage?實現(xiàn)父子跨域通信,通過示例介紹了postMessage的使用，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
解決vue-cli創(chuàng)建項目的loader問題
