Quand la méthode est-elle exécutée dans vue ?

Dans Vue, les méthodes sont des fonctions à l'intérieur d'un composant et sont utilisées pour gérer la logique métier du composant. Les méthodes peuvent être utilisées dans le code du modèle en tant que gestionnaires d'événements ou appelées à partir du code JavaScript du composant.

Alors, quand les méthodes de Vue sont-elles exécutées ? Dans cet article, nous explorerons le timing d'exécution des méthodes dans Vue et en apprendrons davantage sur le processus de rendu de Vue et son application dans le code.

1. Processus de rendu de Vue

Le processus de rendu de Vue est très important, car c'est la clé pour comprendre le timing d'exécution de la méthode. Dans Vue, le processus de rendu est exécuté de manière récursive couche par couche, du composant parent au composant enfant jusqu'à ce que l'intégralité de l'arborescence des composants soit rendue. Le processus de rendu de

Vue est divisé en trois étapes :

1. Étape de création (initialisation) : Cette étape initialise principalement diverses propriétés du composant, telles que les accessoires, les données, les calculs, la montre, etc.

2. Compilation de modèles : compilez le code du modèle dans la fonction de rendu.

3. Phase de montage (Mounting) : Rendre le DOM virtuel généré par la fonction de rendu en éléments DOM réels et monter le composant sur la page.

2. Le timing d'exécution de la méthode

Dans Vue, le timing d'exécution de la méthode est exécuté lorsque le composant est rendu. Les méthodes peuvent être appelées directement à partir du code JavaScript du composant ou déclenchées via des gestionnaires d'événements dans le code du modèle. Dans les deux cas, la méthode sera exécutée pendant le processus de rendu.

Ci-dessous, nous utilisons un exemple pour illustrer le timing d'exécution de la méthode.

Tout d'abord, nous créons un composant contenant deux boutons.

<template>
  <div>
    <button @click="onClick">点击我1</button>
    <button @click="onClick">点击我2</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

Lorsque nous rendrons ce composant pour la première fois, deux boutons seront rendus. Lorsque l'utilisateur clique sur l'un des boutons, la méthode onClick sera déclenchée et la console affichera le message « Le bouton a été cliqué ».

En effet, pendant le processus de rendu, lorsque l'utilisateur clique sur le bouton, Vue capture l'événement via l'écouteur d'événement sous-jacent et appelle la méthode. Dans le processus de rendu de Vue, ce processus se produit entre la phase de compilation du modèle et la phase de montage. C'est-à-dire que lorsque nous cliquons sur le bouton, Vue a terminé la compilation et le rendu de la méthode, et la méthode existe déjà dans l'instance du composant, mais elle est toujours dans un état d'attente, en attendant que l'événement soit déclenché.

3. Application de méthode

Comme mentionné ci-dessus, les méthodes de Vue peuvent être appelées dans le code JavaScript du composant ou déclenchées par le gestionnaire d'événements dans le code du modèle. Les scénarios d'application de ces deux méthodes sont les suivants :

1. Appeler des méthodes dans le code JavaScript du composant

Lorsque nous devons traiter une logique métier à l'intérieur du composant, nous pouvons appeler des méthodes dans le code JavaScript du composant. Par exemple, dans notre exemple ci-dessus, cliquer sur le bouton déclenchera la méthode handleClick et affichera "Le bouton a été cliqué" sur la console.

2. Utiliser des méthodes dans le code du modèle

Lorsque nous devons gérer les opérations utilisateur dans le code du modèle, nous pouvons lier les méthodes aux gestionnaires d'événements. Par exemple, dans notre exemple ci-dessus, nous avons lié la méthode onClick à deux boutons dans le code du modèle, qui est déclenché lorsque le bouton est cliqué. Cette approche est généralement utilisée pour gérer les interactions des utilisateurs.

En résumé, les méthodes de Vue sont exécutées lors du rendu des composants. En maîtrisant le processus de rendu de Vue, nous pouvons mieux comprendre le timing d'exécution des méthodes et être capables d'appliquer habilement des méthodes pour gérer la logique métier et les comportements d'interaction des utilisateurs au sein des composants.

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!