Comment résoudre le problème des événements de changement dans la fenêtre d'écoute VUE

Ci-dessous, je partagerai avec vous une brève discussion sur la question des événements de changement de fenêtre de surveillance VUE. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Vuejs lui-même est un framework MVVM. Cependant, lors du suivi des événements sur la fenêtre, cela semble souvent insuffisant.

Par exemple, cette fois c'était window.resize, je l'ai aussi vérifié sur Baidu avant de le faire. Je vois que tout le monde s'inquiète de ce problème.

Question : J'ai également rencontré un tel problème aujourd'hui, à propos de l'adaptation du canevas. Modifiez la largeur du canevas en fonction du changement de la fenêtre. Remarque : Les problèmes importants doivent être mentionnés trois fois pour résoudre les bugs du framework. Parlons d'abord de la version du framework (Vue 2.x, ES6 utilisé ici)

Solution :

Étape 1 : Définissez d'abord un attribut de largeur d'enregistrement dans les données

data: { 
 screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）
  }

Chapitre Deuxième étape : Nous devons parler de la méthode de montage de l'événement reisze lorsque vue est montée

mounted () { 
    const that = this window.onresize = function() { 
    return function(){ 
      window.screenWidth = document.body.clientWidth;
      that.screenWidth = window.screenWidth
      })()
     } 
    }

Troisième étape : surveillez les changements dans cette valeur d'attribut , si des changements surviennent, transmettez cette valeur à this.screenWidth

watch: { 
   screenWidth (val) { 
      this.screenWidth = val
      } 
    }

Étape 4 : Optimisation : le déclenchement fréquent de la fonction de redimensionnement provoque le blocage de la page

watch: { 
   screenWidth (val) { 
     if (!this.timer) { 
       this.screenWidth = val 
       this.timer = true 
        let that = this 
   setTimeout(function () { 
        // that.screenWidth = that.$store.state.canvasWidth 
  console.log(that.screenWidth) 
        that.init() 
        that.timer = false 
       }, 400) 
      } 
     } 
   }

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

Articles connexes :

Vue implémente le changement d'onglet et la méthode de changement de style

"==" et "===" en JavaScript Explication détaillée de la différence

Notes de développement du projet de blog node.js

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!