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 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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 无线电
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
python中实现k-means聚类算法详解
2017/11/11 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
安全责任书范文
2014/03/12 职场文书
希特勒的演讲稿
2014/05/23 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
债务纠纷起诉书
2015/05/20 职场文书
地震捐款简报
2015/07/21 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby