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 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
原生js实现简单轮播图
Oct 26 Javascript
微信小程序canvas实现签名功能
Jan 19 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
PHP文件读写操作相关函数总结
2014/11/18 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
js中的闭包学习心得
2018/02/06 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
vuex实现购物车功能
2020/06/28 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现画圆功能
2018/01/25 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
自我评价如何写好?
2014/01/05 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2015年员工工作表现评语
2015/03/25 职场文书