Parlons des événements déclencheurs de changement de valeur de vue

Dans Vue, l'idée centrale est basée sur les données, donc lorsque nous modifions les données du composant, nous devons mettre à jour la vue à temps pour obtenir l'effet d'affichage dynamique de la page frontale. Vue fournit un mécanisme très pratique pour déclencher automatiquement les événements correspondants lorsque les données changent, généralement appelé écouteur.

Ici, nous présenterons les points de connaissance pertinents des événements déclenchés lorsque la valeur dans Vue change, pour aider les lecteurs à mieux comprendre et appliquer les fonctions associées de Vue.

1. Moyens de surveiller les modifications des données

Vue propose une variété de façons de surveiller les modifications des données, y compris les calculs, la surveillance, les méthodes, etc. Ci-dessous, nous présenterons respectivement l’utilisation et les caractéristiques de ces méthodes.

1.1 calculé

calculé est un attribut très important dans Vue. Après avoir défini l'attribut calculé dans un composant, Vue calculera automatiquement la valeur de l'attribut lorsque le composant est rendu et mettra automatiquement à jour la vue lorsque la valeur de l'attribut change. .

Ce qui suit est un exemple calculé :

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

Dans cet exemple, lorsque la valeur de firstName ou lastName change, Vue recalculera la valeur de fullName et mettra à jour la vue correspondante.

1.2 watch

watch est un autre moyen de surveiller les changements de données. Il est principalement utilisé pour surveiller les changements d'une certaine valeur et exécuter une logique spécifique lorsqu'elle change. Différent du calcul, watch doit être défini séparément, comme indiqué ci-dessous :

watch: {
  firstName: function (newValue, oldValue) {
    console.log('firstName changed from ' + oldValue + ' to ' + newValue)
  }
}

Dans cet exemple, lorsque la valeur de firstName change, Vue exécutera automatiquement la logique définie dans watch et affichera les informations de journal correspondantes.

1.3 méthodes

methods est un attribut utilisé pour définir la méthode de fonctionnement du composant. Lors de l'appel de la méthode, vous pouvez directement modifier les données du composant et déclencher la mise à jour de la vue correspondante. Bien que cette méthode soit moins pratique, elle s’avère également très pratique dans certains scénarios particuliers.

Ce qui suit est un exemple de l'attribut méthodes :

methods: {
  changeName: function () {
    this.firstName = 'NewName'
  }
}

Dans cet exemple, lorsque la méthode changeName est appelée, Vue modifiera automatiquement la valeur de firstName et déclenchera une mise à jour de la vue.

2. Scénarios d'application d'événements déclenchés par des changements de valeur

Dans le développement réel, nous devons souvent déclencher certains événements correspondants lorsque les données changent pour répondre aux exigences commerciales, telles que la recherche en temps réel, etc. Ci-dessous, nous combinerons des scénarios spécifiques pour présenter comment utiliser la méthode de surveillance des modifications de données introduite dans l'article précédent pour mettre en œuvre des événements déclencheurs de changement de valeur.

2.1 Recherche en temps réel

Dans le développement réel, nous devons généralement implémenter une fonction de recherche en temps réel dans la zone de saisie. Supposons que nous ayons une page de liste d'utilisateurs et que nous devions rechercher la liste d'utilisateurs correspondante en temps réel après que l'utilisateur ait saisi un mot-clé. Voici un exemple de code pour implémenter une recherche en temps réel basée sur watch :

<template>
  <div>
    <input type="text" v-model="keyword" />
    <ul>
      <li v-for="user in filteredUsers">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        keyword: '',
        users: [
          {name: 'Tom'},
          {name: 'Jerry'},
          {name: 'Alice'},
          {name: 'Bob'}
        ]
      }
    },
    computed: {
      filteredUsers: function () {
        return this.users.filter(user => user.name.indexOf(this.keyword) !== -1)
      }
    },
  }
</script>

Dans cet exemple, nous utilisons watch pour surveiller les modifications de l'attribut de mot-clé et recalculer l'attribut filteredUsers lorsqu'il change, réalisant ainsi la fonction de recherche en temps réel. . Cette méthode peut être très facilement appliquée au développement front-end réel.

2.2 Vérification du formulaire

Lors du développement de pages de formulaire, nous devons souvent vérifier le contenu saisi par l'utilisateur et fournir les informations d'invite correspondantes. Voici un exemple de code qui implémente la validation de formulaire basée sur le calcul :

<template>
  <div>
    <input type="text" v-model="username" />
    <div v-if="isValidUsername">{{username}} is valid</div>
    <div v-else>{{username}} is invalid</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        username: ''
      }
    },
    computed: {
      isValidUsername: function () {
        return this.username.length >= 6
      }
    },
  }
</script>

Dans cet exemple, nous calculons la valeur de l'attribut isValidUsername via calculé et mettons à jour la vue correspondante lorsque la valeur change. Cette méthode peut implémenter la validation de formulaire via un code simple et fournir aux utilisateurs des informations rapides et conviviales.

3. Résumé

Le déclenchement d'événements lorsque la valeur change est l'une des fonctionnalités très importantes du framework Vue. En surveillant les modifications des données, nous pouvons facilement réaliser un affichage dynamique et une interaction de la page frontale. Dans les applications pratiques, nous devons choisir la méthode de surveillance appropriée en fonction de scénarios spécifiques et optimiser la mise en œuvre du code en fonction des caractéristiques des composants. Dans le même temps, nous devons également prêter attention à l'impact sur les performances des auditeurs afin d'éviter les problèmes de performances causés par une utilisation excessive des auditeurs.

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!