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 相关文章推荐
取得父标签
Nov 14 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
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
用PHP实现验证码功能
2006/10/09 PHP
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
python表格存取的方法
2018/03/07 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
使用django自带的user做外键的方法
2020/11/30 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
.net工程师笔试题
2012/06/09 面试题
EntityManager都有哪些方法
2013/11/01 面试题
销售会计岗位职责
2014/03/15 职场文书
助残日活动总结
2014/08/27 职场文书
2014年文员工作总结
2014/11/18 职场文书
2014年路政工作总结
2014/12/10 职场文书
学校社团活动总结
2015/05/07 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
Python循环之while无限迭代
2022/04/30 Python