Comment optimiser de manière collaborative les performances des applications grâce à l'attribut calculé et à l'attribut watch de Vue

Comment optimiser de manière collaborative les performances des applications grâce aux propriétés calculées et aux propriétés de surveillance de Vue

Introduction :
Vue est un framework JavaScript progressif pour la création d'interfaces utilisateur. Son concept principal est de lier de manière bidirectionnelle des données et des vues. Dans le développement réel, nous devons souvent traiter certaines données qui nécessitent un calcul ou une surveillance en temps réel, comme la validation de formulaires, le filtrage des données, etc. Afin d'améliorer les performances des applications, Vue fournit des attributs calculés et des attributs de surveillance pour gérer ces exigences de manière collaborative. Cet article explique comment utiliser les attributs calculés et les attributs de surveillance pour optimiser les performances des applications, et donne des exemples de code correspondants.

1. Utilisation de l'attribut calculé
L'attribut calculé nous permet de déclarer certaines propriétés basées sur des dépendances réactives et d'y encapsuler la logique de calcul. Vue mettra automatiquement à jour les valeurs des propriétés calculées en fonction des modifications des dépendances associées pour garantir qu'elles sont toujours à jour.

1.1 Syntaxe de base
Déclarer l'attribut calculé dans un composant Vue est très simple. Il vous suffit de définir une fonction dans l'attribut calculé du composant. Par exemple :

computed: {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Dans le code ci-dessus, nous définissons un attribut calculé fullName, qui renvoie le nom complet après la combinaison de firstName et lastName.

1.2 Cache informatique
Une caractéristique importante de l'attribut calculé est la mise en cache informatique. Lorsque les données réactives dont dépend un attribut calculé changent, l'attribut calculé sera recalculé et les résultats du calcul seront mis en cache. Lors du prochain accès à la propriété calculée, si aucune dépendance associée n'a changé, Vue renverra directement la valeur mise en cache sans recalculer.

Ce mécanisme de cache de calcul améliore considérablement les performances, en particulier lorsque les attributs calculés nécessitent des ressources informatiques importantes, telles que les opérations de filtrage de tableaux.

1.3 Exemple
Ce qui suit est un exemple de code utilisant l'attribut calculé :

<template>
  <div>
    <input v-model="firstName" type="text" placeholder="请输入姓">
    <input v-model="lastName" type="text" placeholder="请输入名">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

Dans le code ci-dessus, nous lions de manière bidirectionnelle deux éléments d'entrée et l'attribut data du composant via la directive v-model. Utilisez ensuite {{ fullName }} dans le modèle pour afficher les résultats du calcul. Lorsque firstName ou lastName change, Vue mettra automatiquement à jour la valeur de fullName et affichera le résultat mis à jour sur la page.

2. Utilisation de l'attribut watch
L'attribut watch nous permet de surveiller un changement de données spécifique et d'effectuer les opérations correspondantes lorsque les données changent. Contrairement à l'attribut calculé, l'attribut watch n'effectue pas de calculs, mais exécute une logique personnalisée après la modification des données.

2.1 Syntaxe de base
Déclarer l'attribut watch dans le composant Vue est également très simple. Il vous suffit de définir une fonction dans l'attribut watch du composant. Par exemple :

watch: {
    firstName(newValue, oldValue) {
        console.log(`firstName从${oldValue}变为${newValue}`);
    }
}

Dans le code ci-dessus, nous définissons un attribut watch pour surveiller le changement de firstName et imprimer les valeurs avant et après le changement lorsqu'il change.

2.2 Surveillance approfondie
Par défaut, Vue surveille uniquement les modifications des propriétés directes des objets ou des tableaux. Si vous devez surveiller en profondeur les modifications de tous les attributs d'un objet ou d'un tableau, vous pouvez utiliser l'attribut deep dans l'attribut watch. Par exemple :

watch: {
    obj: {
        handler(newValue, oldValue) {
            console.log('obj发生变化');
        },
        deep: true
    }
}

Dans le code ci-dessus, nous surveillons en profondeur les modifications d'un objet nommé obj. Lorsqu'un attribut de obj change, la fonction de traitement correspondante sera déclenchée. Ceci est utile pour écouter les changements dans les objets.

2.3 Surveillance asynchrone
Parfois, nous souhaitons effectuer certaines opérations asynchrones après des modifications de données, telles que l'envoi de requêtes ou la mise à jour des caches. Vue permet de définir une fonction asynchrone appelée handler dans l'attribut watch pour gérer cette situation. Par exemple :

watch: {
    firstName(newValue, oldValue) {
        this.debouncedGetData();
    }
},
methods: {
    debouncedGetData: debounce(function() {
        // 异步操作
    }, 500)
}

Dans le code ci-dessus, nous utilisons la fonction anti-rebond dans la bibliothèque lodash pour limiter la fréquence d'appel de this.debouncingGetData afin de garantir qu'une seule opération asynchrone est effectuée dans les 500 millisecondes.

3. Utilisation collaborative des attributs calculés et des attributs de surveillance
Les attributs calculés et les attributs de surveillance peuvent être utilisés de manière collaborative et ils ne s'excluent pas mutuellement. Dans le développement réel, nous pouvons choisir de manière flexible l'un des deux en fonction de différents besoins, ou utiliser les deux en même temps.

Lorsque vous utilisez l'attribut calculé, vous devez prendre en compte les caractéristiques du cache de calcul, qui conviennent aux résultats qui reposent sur d'autres calculs de données réactifs. Lorsque vous utilisez l'attribut watch, il s'agit généralement de surveiller les modifications des données réactives et d'effectuer les opérations correspondantes, ce qui convient aux scénarios nécessitant une réponse immédiate aux modifications des données.

Par exemple, nous pouvons utiliser l'attribut calculé pour calculer le prix total d'un panier :

computed: {
    totalPrice() {
        return this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
    }
}

Et utiliser l'attribut watch pour suivre l'évolution de la quantité d'un produit dans le panier et mettre à jour le prix total lorsqu'il changements :

watch: {
    'cart': {
        handler(newValue, oldValue) {
            this.totalPrice = this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
        },
        deep: true
    }
}

Dans ce qui précède Dans le code, nous surveillons les changements dans le panier (cart). Lorsque la quantité d'un produit dans le panier change, le prix total (totalPrice) sera recalculé et mis à jour.

Conclusion :
Dans la pratique du développement Vue, l'utilisation rationnelle des attributs calculés et des attributs de surveillance peut améliorer les performances des applications et l'efficacité du développement. L'attribut calculé peut économiser des ressources informatiques et mettre en œuvre une logique métier complexe ; tandis que l'attribut de surveillance peut surveiller les modifications des données et effectuer les opérations correspondantes pour répondre à certains besoins particuliers. Une utilisation flexible de ces deux fonctionnalités en fonction de situations spécifiques peut rendre le code plus concis et élégant.

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!