vue進行圖片的預(yù)加載watch用法實例講解
watch應(yīng)用場景
我想信圖片預(yù)加載大家肯定都有接觸過，當圖片量大的時候，為了保證頁面圖片都加載出來的時候，我們才把主頁面給顯示出來，再進行一些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 選項，來響應(yīng)數(shù)據(jù)的變化。當你想要在數(shù)據(jù)變化響應(yīng)時，執(zhí)行異步操作或開銷較大的操作，這是很有用的。
基于這個官方的理解再總結(jié)我個人的整體理解。給出computed和watch的總結(jié)，記住這幾點的總結(jié)，在做項目的時候想想這些總結(jié)，選擇你的應(yīng)用方法
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進行圖片的預(yù)加載watch用法實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue.js簡易安裝和快速入門的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法
這篇文章主要介紹了vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue面試之new Vue的時候到底做了什么原理及vue加載流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要給大家介紹了關(guān)于Vue項目中最新用到的一些實用小技巧，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
關(guān)于在vscode使用webpack指令顯示"因為在此系統(tǒng)中禁止運行腳本"問題(完美解決)
這篇文章主要介紹了解決在vscode使用webpack指令顯示"因為在此系統(tǒng)中禁止運行腳本"問題,本文給大家分享完美解決方法，需要的朋友可以參考下2021-07-07
Vue使用Axios和elementui實現(xiàn)查詢分頁功能
當今的Web開發(fā)趨勢中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨立進行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實現(xiàn)查詢分頁功能,需要的朋友可以參考下2024-06-06
這篇文章主要給大家介紹了關(guān)于vue中實現(xiàn)div可編輯并插入指定元素與樣式的相關(guān)資料,文中通過代碼以及圖文將實現(xiàn)的方法介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
如何使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理
最近在做一個文件夾管理的功能，要實現(xiàn)一個樹狀的拖拽文件夾面板，里面包含兩種元素，文件夾以及文件，這篇文章主要介紹了使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理?,需要的朋友可以參考下2023-09-09
vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例
今天小編就為大家分享一篇vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下2023-09-09