当前位置:Gxlcms > JavaScript > 在vue中预加载watch用法

在vue中预加载watch用法

时间:2021-07-01 10:21:17 帮助过:17人阅读

下面我就为大家分享一篇vue进行图片的预加载watch用法实例讲解,具有很好的参考价值,希望对大家有所帮助。

watch应用场景

我想信图片预加载大家肯定都有接触过,当图片量大的时候,为了保证页面图片都加载出来的时候,我们才把主页面给显示出来,再进行一些ajax请求,或者逻辑操作

那此时你用computed对这种监听一个数据然后进行一系列逻辑操作和ajax请求,那watch再适合不过了,如果用computed的话那你连实现都实现不了,只有用watch监听

 <template>
 <p 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="">
 </p>
</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:

只有一个一个监听据,只要这个数据发生变化,就会在返回两个参数,第一个是当前的值,第二个是变化前的值,每当变化的时候,则会触发函数体的里的逻辑行为,来进逻辑后续操作

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详解讲解使用jest测试react native组件

在vue中全选实现数据的绑定及获取

在mint-ui中使用时间插件及获取选择值

以上就是在vue中预加载watch用法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行