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 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
深入理解Vue router的部分高级用法
Aug 15 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
Javascript 面向对象特性
2009/12/28 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
什么是python的列表推导式
2020/05/26 Python
Pygame框架实现飞机大战
2020/08/07 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
大学生简短的自我评价分享
2014/02/20 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
团组织推荐意见
2015/06/05 职场文书
中学教师教学工作总结
2015/08/13 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏