vue进行图片的预加载watch用法实例讲解


Posted in Javascript onFebruary 07, 2018

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用法实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
js实现div在页面拖动效果
May 04 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
php 修改密码实现代码
May 24 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 #Javascript
详解JS数值Number类型
Feb 07 #Javascript
vue几个常用跨域处理方式介绍
Feb 07 #Javascript
vue项目中axios使用详解
Feb 07 #Javascript
vue-cli webpack2项目打包优化分享
Feb 07 #Javascript
浅谈es6中export和export default的作用及区别
Feb 07 #Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP 全角转半角实现代码
2010/05/16 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
img标签中onerror用法
2009/08/13 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python实现一组典型数据格式转换
2018/12/15 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
python自动下载图片的方法示例
2020/03/25 Python
Python restful框架接口开发实现
2020/04/13 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
软件研发工程师岗位职责
2014/09/30 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书