vue进行图片的预加载watch用法实例讲解
更新时间：2018年02月07日 10:51:33 作者：咖喱鸡块
下面小编就为大家分享一篇vue进行图片的预加载watch用法实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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用法实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue.js简易安装和快速入门的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
vue项目中使用eslint+prettier规范与检查代码的方法
这篇文章主要介绍了vue项目中使用eslint+prettier规范与检查代码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了vue面试之new Vue的时候到底做了什么原理及vue加载流程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要给大家介绍了关于Vue项目中最新用到的一些实用小技巧，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题(完美解决)
这篇文章主要介绍了解决在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题,本文给大家分享完美解决方法，需要的朋友可以参考下2021-07-07
当今的Web开发趋势中,前后端分离已经成为一种流行的架构模式,它将前端和后端的开发分离开来,使得前端和后端可以独立进行开发和部署,本文给大家介绍了Vue使用Axios和elementui实现查询分页功能,需要的朋友可以参考下2024-06-06
这篇文章主要给大家介绍了关于vue中实现div可编辑并插入指定元素与样式的相关资料,文中通过代码以及图文将实现的方法介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
最近在做一个文件夹管理的功能，要实现一个树状的拖拽文件夹面板，里面包含两种元素，文件夹以及文件，这篇文章主要介绍了使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理 ,需要的朋友可以参考下2023-09-09
今天小编就为大家分享一篇vue 实现在函数中触发路由跳转的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下2023-09-09
最新评论