Maison > Article > interface Web > Explication détaillée de la fonction Vue.watch et comment implémenter la surveillance des données

Explication détaillée de la fonction Vue.watch et comment implémenter la surveillance des données

王林original: 2023-07-25 08:57:141171parcourir

Vue.js, en tant que framework JavaScript populaire, fournit diverses fonctions pratiques pour nous aider à créer des applications frontales interactives. L’une des fonctions très importantes est la surveillance des données, c’est-à-dire que lorsque les données changent, nous pouvons effectuer des opérations spécifiques. La fonction Vue.watch est une méthode utilisée pour mettre en œuvre la surveillance des données.

La fonction Vue.watch est définie comme suit :

vm.$watch(expOrFn, callback, [options])

où vm représente l'instance de Vue, expOrFn représente la propriété ou une fonction qui doit être surveillée, callback représente la fonction de rappel lorsque la propriété surveillée change et options représente certaines options de configuration supplémentaires.

L'utilisation de la fonction Vue.watch peut être divisée en deux situations : la surveillance d'un bien et la surveillance d'une fonction.

Écouter une propriété
Pour illustrer avec un exemple simple, nous créons une instance Vue, définissons un nom de propriété dans data, puis utilisons la fonction watch pour écouter les changements dans le nom.
```
<body>
 <div id="app">
     <p>{{ name }}</p>
 </div>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             name: 'John'
         },
         watch: {
             name: function(newName, oldName) {
                 console.log('name变为：' + newName);
             }
         }
     });
     vm.name = 'Tom';  // 控制台输出：name变为：Tom
 </script>
</body>
```
Dans cet exemple, lorsque l'attribut name change, la fonction watch sera déclenchée, en transmettant deux paramètres : la nouvelle valeur et l'ancienne valeur. Imprimez la nouvelle valeur du nom dans la console.

Écouter une fonction
En plus de surveiller les changements de propriétés, nous pouvons également surveiller les changements de fonctions. Dans l'exemple suivant, nous définissons une fonction getFullName dans data et utilisons la fonction watch pour surveiller les modifications dans getFullName.

<body>
 <div id="app">
     <p>{{ getFullName() }}</p>
 </div>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             firstName: 'John',
             lastName: 'Doe'
         },
         methods: {
             getFullName: function() {
                 return this.firstName + ' ' + this.lastName;
             }
         },
         watch: {
             getFullName: function(newVal, oldVal) {
                 console.log('getFullName变为：' + newVal);
             }
         }
     });
     vm.lastName = 'Smith';  // 控制台输出：getFullName变为：John Smith
 </script>
</body>

Dans cet exemple, lorsque les propriétés dépendantes à l'intérieur de la fonction getFullName changent, la fonction de surveillance sera déclenchée.

En plus des exemples ci-dessus, la fonction Vue.watch propose des options de configuration supplémentaires, telles que profonde et immédiate. L'option deep est utilisée pour surveiller en profondeur les objets imbriqués, et l'option immédiate indique s'il faut déclencher la fonction de rappel immédiatement.

Grâce à la fonction Vue.watch, nous pouvons facilement surveiller les données et effectuer les opérations associées lorsque les données changent. Ceci est très utile pour créer des applications frontales interactives complexes.

Résumé : La fonction Vue.watch est une méthode utilisée pour implémenter la surveillance des données dans le framework Vue.js. Grâce à cette fonction, nous pouvons surveiller les changements de propriétés ou de fonctions et effectuer les opérations associées lorsque des changements se produisent. Grâce à cette fonction, vous pouvez facilement surveiller et traiter les données, offrant ainsi un moyen pratique de créer des applications frontales interactives.

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!

JavaScript vue.js 回调函数 JS 对象

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Étapes et considérations pour personnaliser les composants à l'aide de la fonction Vue.extendArticle suivant：Étapes et considérations pour personnaliser les composants à l'aide de la fonction Vue.extend

Articles Liés

Voir plus