Définissez d'abord les attributs à surveiller dans les données, car l'écouteur de surveillance surveille les attributs dans les données et ne peut pas surveiller directement la fenêtre d'
exportation par défaut { data () { return { screenWidth: document.body.clientWidth, } } }
L'appel de la fenêtre pour surveiller l'événement de redimensionnement dans mouted déclenchera mount
() { let that = this; window.addEventListener ("resize", function () { return (() => { window.screenWidth = document.body.clientWidth; that.screenWidth = window.screenWidth; }) (); }); }
Enfin, vous pouvez surveiller la propriété creepWidth dans les données de
watch watch: { screenWidth: { handler (newVal, oldVal) { // Afin d'éviter un déclenchement fréquent de la fonction de redimensionnement et de faire geler la page, utilisez le minuteur si ( ! this.timer) { / / Une fois que la valeur screenWidth surveillée change, réassignez-la à screenWidth dans les données this.screenWidth = newVal; this.timer = true; let that = this; setTimeout (function () { // Imprimer le valeur modifiée de screenWidth console .log (that.screenWidth) that.timer = false; that.contentWidthChange (); // Exécuter votre propre logique }, 400) } }, immédiate: true, } }
Remarque: l' instance
créée
est appelée après sa création. Dans cette étape, l'instance a terminé la configuration suivante: observation des données, calcul des attributs et des méthodes, rappel d'événement de surveillance / événement, initialisation des données de données terminée, el n'a pas . Cependant, la phase de suspension n'a pas encore commencé et l'attribut $ el n'est actuellement pas visible; la suspension
montée
est terminée, c'est-à-dire que le code HTML du modèle est rendu sur la page HTML et monté ne sera exécuté qu'une seule fois.