快捷導(dǎo)航

vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解

更新時(shí)間：2018年02月07日 10:51:33 作者：咖喱雞塊

下面小編就為大家分享一篇vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

watch應(yīng)用場(chǎng)景

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

那此時(shí)你用computed對(duì)這種監(jiān)聽一個(gè)數(shù)據(jù)然后進(jìn)行一系列邏輯操作和ajax請(qǐng)求，那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("加載完畢")
     //然后可以對(duì)后臺(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í)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js簡(jiǎn)易安裝和快速入門（第二課）
這篇文章主要為大家詳細(xì)介紹了Vue.js簡(jiǎn)易安裝和快速入門的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
vue項(xiàng)目中使用eslint+prettier規(guī)范與檢查代碼的方法
這篇文章主要介紹了vue項(xiàng)目中使用eslint+prettier規(guī)范與檢查代碼的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
vue面試之new Vue的時(shí)候到底做了什么
這篇文章主要介紹了vue面試之new Vue的時(shí)候到底做了什么原理及vue加載流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Vue項(xiàng)目中最新用到的一些實(shí)用小技巧
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中最新用到的一些實(shí)用小技巧，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
關(guān)于在vscode使用webpack指令顯示"因?yàn)樵诖讼到y(tǒng)中禁止運(yùn)行腳本"問題(完美解決)
這篇文章主要介紹了解決在vscode使用webpack指令顯示"因?yàn)樵诖讼到y(tǒng)中禁止運(yùn)行腳本"問題,本文給大家分享完美解決方法，需要的朋友可以參考下
2021-07-07
Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁功能
當(dāng)今的Web開發(fā)趨勢(shì)中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨(dú)立進(jìn)行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁功能,需要的朋友可以參考下
2024-06-06
vue中實(shí)現(xiàn)div可編輯并插入指定元素與樣式
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)div可編輯并插入指定元素與樣式的相關(guān)資料,文中通過代碼以及圖文將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09
如何使用Vue3+elementPlus的Tree組件實(shí)現(xiàn)一個(gè)拖拽文件夾管理
最近在做一個(gè)文件夾管理的功能，要實(shí)現(xiàn)一個(gè)樹狀的拖拽文件夾面板，里面包含兩種元素，文件夾以及文件，這篇文章主要介紹了使用Vue3+elementPlus的Tree組件實(shí)現(xiàn)一個(gè)拖拽文件夾管理?,需要的朋友可以參考下
2023-09-09
vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue實(shí)現(xiàn)多條件篩選超簡(jiǎn)潔代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進(jìn)行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下
2023-09-09