Précharger l'utilisation de la montre dans vue

Ci-dessous, je vais partager avec vous un exemple d'utilisation de Vue pour précharger la montre pour les images. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

regarder des scénarios d'application

Je crois que tout le monde doit avoir été exposé au préchargement d'images lorsque la quantité d'images est importante, afin de pouvoir le faire. assurer la page Lorsque toutes les images sont chargées, nous affichons la page principale puis effectuons quelques requêtes ajax ou opérations logiques

Ensuite, vous utilisez calculé pour surveiller une donnée puis effectuez une série d'opérations logiques et de requêtes Ajax, alors watch est parfait. Si vous utilisez le calcul, vous ne pouvez même pas l'implémenter. Ce n'est qu'en utilisant watch pour surveiller

 <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(&#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>

que nous pouvons constater que la page ne s'affiche pas tant que les quatre images ne sont pas chargées.

Selon Wan Fang, il existe un dicton très important

Bien que les propriétés calculées soient plus appropriées dans la plupart des cas, il arrive parfois qu'un observateur personnalisé soit requis. C'est pourquoi Vue propose un moyen plus général de répondre aux modifications de données via l'option de surveillance. Ceci est utile lorsque vous souhaitez effectuer des opérations asynchrones ou coûteuses en réponse à des modifications de données.

Sur la base de cette compréhension officielle, je résumerai ma compréhension personnelle globale. Donnez un résumé du calcul et regardez. Pensez au résumé de ces points lorsque vous travaillez sur le projet et choisissez votre méthode d'application

calculé :

Surveillez plusieurs données ou une donnée pour conserver et renvoyer une valeur d'état Tant qu'une ou plusieurs données changent, l'ensemble du corps de la fonction sera recalculé et la valeur d'état sera à nouveau renvoyée

watch :

n'a qu'une seule donnée de surveillance Tant que ces données changent, elle renverra deux paramètres. Le premier est la valeur actuelle et la. la deuxième est la valeur actuelle. Chacune est la valeur avant le changement. Chaque fois qu'elle change, le comportement logique dans le corps de la fonction sera déclenché pour effectuer des opérations logiques ultérieures

Ce qui précède est ce que j'ai compilé pour tout le monde. j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Explication détaillée de l'utilisation de Jest pour tester les composants natifs de réaction

Sélectionnez tout dans la vue pour réaliser la liaison et l'acquisition de données

Utilisez le plug-in time dans mint-ui et obtenez la valeur de sélection

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!