Bonnes pratiques pour les propriétés calculées de Vue

Vue.js Calcul Attribut Meilleures pratiques: traitement efficace des données et maintenance du code

L'attribut de calcul de

Vue.js est une fonctionnalité puissante qui vous permet d'attribuer dynamiquement et de convecter des données basées sur l'état réactif. L'utilisation correcte des attributs de calcul peut rendre votre code plus concis, plus efficace et plus facile à entretenir. Cependant, une mauvaise utilisation peut provoquer des erreurs et des problèmes de performances inattendus.

Cet article présentera les meilleures pratiques de l'attribut de calcul Vue pour vous aider à utiliser pleinement ses avantages.

Quel est l'attribut de calcul?

Vue Computing L'attribut est un attribut spécial dans Vue, qui sera automatiquement mis à jour lorsque leurs éléments de dépendance changent. Contrairement aux méthodes, ils ont mis en cache jusqu'à ce que leurs dépendances changent, ce qui en fait un choix efficace pour les dérivés.

Ce qui suit est un exemple de base:

<code class="language-javascript">import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);</code>

Ici, tant que firstName ou lastName modifie, fullName sera mis à jour automatiquement sans re-calculant manuellement.

La meilleure pratique de calcul des attributs

Maintenant, nous avons appris ce qu'est l'attribut de calcul Vue, comprenons les meilleures pratiques.

1. L'attribut de calcul est utilisé dans le statut dérivé

Évitez l'utilisation des attributs de calcul directement ou définir. Au lieu de cela, conservez-les pour le calcul ou la conversion en fonction des états existants.

L'utilisation correcte:

<code class="language-javascript">const cartItems = ref([{ price: 10 }, { price: 15 }]);
const totalPrice = computed(() => cartItems.value.reduce((sum, item) => sum + item.price, 0));</code>

L'utilisation des erreurs:

<code class="language-javascript">const cartItems = ref([]);
const addItem = computed(() => (item) => cartItems.value.push(item)); // 使用方法来修改状态</code>

2. Évitez les effets secondaires dans le calcul de l'attribut

L'attribut de calcul doit être pur sans effets secondaires. Cela garantit leur prévisibilité et uniquement pour calculer les valeurs.

L'utilisation correcte:

<code class="language-javascript">const items = ref([1, 2, 3]);
const doubledItems = computed(() => items.value.map(item => item * 2));</code>

L'utilisation des erreurs:

<code class="language-javascript">const items = ref([1, 2, 3]);
const doubledItems = computed(() => {
  console.log('Doubled items calculated'); // 副作用
  return items.value.map(item => item * 2);
});</code>

3. Le calcul coûteux du cache

L'un des principaux avantages du calcul des attributs est son mécanisme de cache. Pour les calculs coûteux, ce mécanisme peut éviter une ré-calcul inutile.

<code class="language-javascript">const largeData = ref([...Array(1000000).keys()]);
const sum = computed(() => largeData.value.reduce((a, b) => a + b, 0));</code>

4. Créez une propriété informatique de liaison à deux voies avec Getter et Setter

Lorsque vous avez besoin d'une propriété de calcul qui peut être obtenue et définit la valeur, utilisez Getter et Setter. Ceci est très utile pour les dérivés qui affectent d'autres données réactives.

<code class="language-javascript">import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (newValue) => {
    const [first, last] = newValue.split(' ');
    firstName.value = first;
    lastName.value = last;
  }
});</code>

5. Décomposer les attributs complexes calculés

Pour la lisibilité et la maintenance, évitez les attributs informatiques trop compliqués. Si nécessaire, décomposez-le en une partie plus petite et réutilisable.

<code class="language-javascript">const basePrice = ref(100);
const tax = ref(0.1);

const priceWithTax = computed(() => basePrice.value * (1 + tax.value));
const formattedPrice = computed(() => `$${priceWithTax.value.toFixed(2)}`);</code>

en savoir plus

Si vous voulez en savoir plus sur Vue, Nuxt, JavaScript ou d'autres technologies utiles, veuillez cliquer sur le lien ci-dessous ou l'image pour voir Vueschool:

Résumé

Les attributs de calcul sont des outils importants pour les dérivés de gestion à haute efficacité dans Vue. En suivant les meilleures pratiques, comme éviter les effets secondaires et utiliser une logique complexe avec cache et décomposition, vous pouvez vous assurer que votre application maintient des performances et une maintenabilité élevées. À partir d'aujourd'hui, ces techniques sont utilisées pour écrire des composants Vue plus concis et robustes!

Je vous souhaite un codage heureux!

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!