Preload watch usage in vue

Below I will share with you an example of how to use vue to preload watch for images. It has a good reference value and I hope it will be helpful to everyone.

watch application scenarios

I believe that everyone must have been exposed to image preloading. When the amount of images is large, in order to ensure that the page When all the images are loaded, we display the main page and then perform some ajax requests or logical operations

Then you use computed to monitor a data and then perform a series of logical operations and Ajax request, then watch is perfect. If you use computed, you can't even implement it. Only by using watch to monitor

 <template>
 <p v-show=show>
  <img src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg"  class="lazy"   alt="">
  <img src="/static/imghwm/default1.png"  data-src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp"  class="lazy"   alt="">
  <img src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg"  class="lazy"   alt="">
  <img src="/static/imghwm/default1.png"  data-src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp"  class="lazy"   alt="">
 </p>
</template>
<script>
 export default {
  mounted () {
   var _this = this
   let imgs = document.querySelectorAll(&#39;img&#39;)
   console.log(imgs)
   Array.from(imgs).forEach((item)=>{
    let img = new Image()
    img.onload = ()=>{
     this.count++
    }
    img.src=item.getAttribute(&#39;src&#39;)
   })
  },
  data () {
   return {
    count : 0,
    show : false
   }
  },
  watch : {
   count (val,oldval) {
    if(val == 4){
     this.show = true
     alert("加载完毕")
     //然后可以对后台发送一些ajax操作
    }
   }
  }
 }
</script>

We can find that the page is not displayed until all four pictures have been loaded

According to Wan Fang’s very important sentence

Although calculated properties are more appropriate in most cases, sometimes a Custom watcher. This is why Vue provides a more general way to respond to data changes through the watch option. This is useful when you want to perform asynchronous or expensive operations in response to data changes.

Based on this official understanding, I will summarize my personal overall understanding. Give a summary of computed and watch. Remember the summary of these points. Think about these summaries when working on the project and choose your application method

computed:

Monitor multiple data or one data to maintain and return a status value. As long as one or more of the data changes, the entire function body will be recalculated and the status value will be returned again

watch:

There is only one monitoring data. As long as the data changes, two parameters will be returned. The first one is the current value, and the second one is the current value. The first is the value before the change. Whenever it changes, the logical behavior in the function body will be triggered to perform logical subsequent operations.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

Related articles:

Detailed explanation of using jest to test react native components

Select all in vue to achieve data binding and acquisition

Using the time plug-in in mint-ui and getting the selection value

The above is the detailed content of Preload watch usage in vue. For more information, please follow other related articles on the PHP Chinese website!