Qu'est-ce que le mixage vue.js ?-Voir.js-php.cn

Qu'est-ce que le mixage vue.js ?

青灯夜游

Libérer： 2020-11-23 11:01:30

original

1726 Les gens l'ont consulté

Le mixage dans vue.js est une méthode ou une propriété calculée qui distribue des fonctions réutilisables dans les composants Vue. Objectif : 1. Une fois le constructeur écrit, vous devez ajouter des méthodes ou des activités temporaires. Lors de l'utilisation de la méthode, mélanger. in réduira la pollution du code source ;2. Lors de l'utilisation de méthodes publiques, l'utilisation de la méthode de mélange peut réduire la quantité de code et permettre la réutilisation du code.

Qu'est-ce que le mixage vue.js ?

Cette méthode convient à toutes les marques d'ordinateurs.

Les mixins définissent une partie de méthodes réutilisables ou de propriétés calculées. Les mixins peuvent contenir des options de composants arbitraires. Lorsqu'un composant utilise un objet mixin, toutes les options de l'objet mixin seront mélangées aux options du composant lui-même.

Les mixins ont généralement deux utilisations :

1 Après avoir écrit le constructeur, vous devez ajouter des méthodes ou des activités temporaires de temps en temps. réduira la pollution du code source.

2. Les méthodes publiques sont utilisées dans de nombreux endroits. L'utilisation de la méthode de mixage peut réduire la quantité de code et permettre la réutilisation du code.

Utilisation de base des Mixins

Nous avons maintenant un programme qui incrémente les nombres en cliquant dessus. En supposant qu'il soit terminé, nous espérons qu'à chaque fois. les données changent Une invite peut être imprimée sur la console : "Les données ont changé".

Processus d'implémentation du code :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="../assets/js/vue.js"></script>
  <title>Mixins Option Demo</title>
</head>
<body>
  <h1>Mixins Option Demo</h1>
  <hr>
  <div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加数量</button></P>
  </div>
 
  <script type="text/javascript">
    //额外临时加入时，用于显示日志
    var addLog={
      updated:function(){
        console.log("数据放生变化,变化成"+this.num+".");
      }
    }
    var app=new Vue({
      el:&#39;#app&#39;,
      data:{
        num:1
      },
      methods:{
        add:function(){
          this.num++;
        }
      },
      mixins:[addLog]//混入
    })
  </script>
</body>
</html>

Copier après la connexion

La séquence d'appel des mixins

En termes d'ordre d'exécution, les méthodes mixtes sont exécutées en premier, puis celles du constructeur sont exécutées. Il convient de noter qu'il ne s'agit pas d'un remplacement de la méthode, mais qu'elle est exécutée des deux côtés.

Dans le constructeur du code ci-dessus, nous avons également ajouté la fonction hook mise à jour :

updated:function(){
   console.log("构造器里的updated方法。")
},

Copier après la connexion

À l'heure actuelle, l'ordre de sortie de la console est :

mixins data Libérez la modification et remplacez-la par 2. La méthode mise à jour dans le constructeur
.

PS : Lorsque la méthode mixte et la méthode constructeur ont le même nom, la méthode mixte ne peut pas être affichée, c'est-à-dire qu'elle ne fonctionnera pas.

Méthode de mix-in API globale

Nous pouvons également définir un mix-in global, afin que vous puissiez avoir cette fonction en introduisant directement js où ceci le code est nécessaire. Jetons un coup d'œil à la méthode de mix-in global :

Vue.mixin({
  updated:function(){
    console.log(&#39;我是全局被混入的&#39;);
  }
})

Copier après la connexion

PS : L'ordre d'exécution des mix-ins globaux est avant les méthodes dans les mix-ins et les constructeurs.

Recommandations associées :

Un résumé des questions d'entretien de vue frontale en 2020 (avec réponses)

Tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!