Réutilisation de la logique et optimisation des performances

Après avoir terminé la logique de routage et de connexion, à mesure que le projet prend de l'ampleur, nous constaterons que certaines logiques (comme l'accès aux données locales, l'apparition de notifications) se répètent sur plusieurs pages. En même temps, si la liste des tâches atteint des milliers d'éléments, la page peut ralentir.

Dans cette phase, nous utiliseronsl'application approfondie de la Composition APIpour résoudre les problèmes de réutilisation du code et de goulots d'étranglement de performance.

Réutilisation de la logique : Composables personnalisés (Hooks)

Les composables sont l'essence de Vue 3 ; ils nous permettent d'extraire la logique (état + actions) dans des fonctions indépendantes.

useLocalStorage: Extraction de la logique de persistance des données

Plus besoin d'écrire manuellement dans chaque Store ou composantlocalStorage.getItem。

Exemple

// src/composables/useLocalStorage.js
import { ref, watch } from 'vue';

export function useLocalStorage(key, defaultValue = null) {
  // 1. Initialiser les données
  const storedValue = localStorage.getItem(key);
  const data = ref(storedValue ? JSON.parse(storedValue) : defaultValue);

  // 2. Écouter les changements et synchroniser automatiquement
  watch(data, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue));
  }, { deep: true });

  return data;
}

useNotification: Extraction de logique UI commune

Implémenter une fonctionnalité simple d'invite de notification.

Exemple

// src/composables/useNotification.js
import { ref } from 'vue';

export function useNotification() {
  const message = ref('');
  const isVisible = ref(false);

  const notify = (msg, duration = 2000) => {
    message.value = msg;
    isVisible.value = true;
    setTimeout(() => {
      isVisible.value = false;
    }, duration);
  };

  return { message, isVisible, notify };
}

Optimisation des performances : Gestion de gros volumes de données et rendu à haute fréquence

Lorsque votre TaskHub passe de la gestion de 10 tâches à la gestion de 1000 tâches, la "réactivité profonde" par défaut de Vue entraînera une pression de calcul.

shallowRefetmarkRaw

Le comportement par défaut de Vuerefest réactif de manière récursive (c'est-à-dire que chaque propriété à l'intérieur de l'objet est transformée en proxy).

shallowRef: N'écouter que.valuele changement de la référence, pas les changements des propriétés internes de l'objet.

  • Scénario: Lorsque vous récupérez une grande liste en lecture seule d'historique des tâches depuis le backend.

markRaw: Marquer un objet pour qu'il ne soitjamaisconverti en réactif.

  • Scénario: Certaines instances complexes de bibliothèques tierces (comme les instances de graphiques ECharts, les instances de cartes) peuvent provoquer des erreurs ou être extrêmement gourmandes en performances si elles sont encapsulées en réactif.
// 性能优化示例
import { shallowRef, markRaw } from 'vue';

// 假设这是一万条历史归档数据
const archiveTasks = shallowRef([]); 

const loadArchive = (data) => {
  // 仅在赋值时触发一次响应式更新，内部属性修改不触发
  archiveTasks.value = data; 
};

v-onceetv-memo(Optimisation au niveau des directives)

v-once: Le contenu statique n'est rendu qu'une seule fois

Si une tâche ne change plus après le rendu (par exemple, la date de création de la tâche), utilisezv-once。

<span v-once>创建于: {{ task.createdAt }}</span>
  • Principe: Vue ignorera les vérifications de mise à jour ultérieures pour ce nœud après le rendu.

v-memo: Mise à jour à la demande (Vue 3.2+)

C'est la directive la plus puissante pour optimiser les longues listes. Elle accepte un tableau de dépendances ; ce n'est que lorsque les valeurs de ce tableau changent que le nœud et ses nœuds enfants seront re-rendus.

<li v-for="task in tasks" :key="task.id" v-memo="[task.isCompleted, task.title]">
  {{ task.title }} - {{ task.isCompleted }}
</li>

Quand faut-il optimiser ?

Solution Problèmes résolus Scénarios recommandés
Composables Duplication de code, logique éparpillée Logique partagée entre composants (par ex. vérifications de connexion, changement de thème)
shallowRef Surcharge mémoire causée par le proxy profond de grands objets Lorsque le volume de données de la liste > 1000 et qu'elle ne doit être remplacée qu'en bloc
v-memo Diffing fréquent du DOM virtuel de longues listes Complexev-forlistes, et seules quelques propriétés changent par élément

Intégration dans le projet précédent

Vous pouvez essayer deTaskItem.vueappliquer dansv-memo：

<template>
  <li v-memo="[task.id, task.isCompleted]" class="...">
     ...
  </li>
</template>

Maintenant, votre projet n'est pas seulement logiquement clair (Composables), mais il est aussi très performant.

Autres extensions