Vue Academy · Leçon

Réactivité avancée : shallowRef et triggerRef

shallowRef pour les performances, markRaw pour exclure de la réactivité et triggerRef pour un déclenchement manuel

Leçon 1 sur 413 étapes

Réactivité avancée : shallowRef et triggerRef est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Au-delà de ref et reactive

La réactivité profonde de Vue est pratique, mais ne correspond pas toujours à vos besoins. Pour les objets volumineux ou les instances externes, le suivi en profondeur est coûteux. Vue propose shallowRef, triggerRef et markRaw pour un contrôle précis.

Comment ref suit les modifications en profondeur

Un ref normal contenant un objet rend l’objet entier profondément réactif : la modification de n’importe quelle propriété imbriquée déclenche des mises à jour. C’est idéal pour un petit state, mais coûteux pour les grandes structures.

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef : seul .value est réactif

shallowRef suit la réaffectation de .value, mais ne suit pas les mutations à l’intérieur de la valeur détenue. Les modifications internes ne déclenchent pas de nouveaux affichages.

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

Quand utiliser shallowRef

Utilisez-le pour de grandes données presque immuables que vous remplacez entièrement, ou pour encapsuler des objets externes (une instance de chart, un grand ensemble de données) lorsque le suivi en profondeur ajoute un coût sans apporter de bénéfice.

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

Le problème des mutations profondes

Parfois, vous devez DO muter à l’intérieur d’un shallowRef (pour les performances), tout en ayant besoin d’un nouveau rendu à un moment maîtrisé. Vue ne peut pas voir la modification, et l’interface devient obsolète.

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef : forcer une mise à jour

triggerRef force manuellement le réexécution des effets qui dépendent d’une référence superficielle, après que vous avez modifié son contenu. Vous regroupez plusieurs modifications, puis vous ne déclenchez la mise à jour qu’une seule fois.

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

Un modèle de performance

Le modèle est le suivant : conserver une grande structure dans shallowRef, la modifier librement sans coût de réactivité à chaque changement, puis appeler triggerRef une seule fois lorsque vous voulez que la vue reflète l’ensemble des modifications.

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw : désactiver entièrement la réactivité

markRaw marque un objet afin que Vue ne le rende jamais réactif, même s’il se trouve dans un objet reactive ou une ref normale. Utilisez-le pour les instances de classes tierces qui ne doivent pas être encapsulées dans un proxy.

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

Pourquoi markRaw est important

Envelopper des instances de classes complexes (cartes, éditeurs, connexions WebSocket) dans un proxy réactif peut rompre leurs références internes ou provoquer des erreurs difficiles à détecter. markRaw les laisse intactes tout en les conservant dans un état réactif.

Combiner les outils

Ces outils se combinent : une shallowRef contenant une instance marquée par markRaw vous fournit un emplacement que vous pouvez remplacer de manière réactive, avec un objet interne que Vue n’encapsule jamais dans un proxy — une solution idéale pour les intégrations externes.

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

Coût de la réactivité et contrôle

Le compromis est le suivant : la réactivité profonde est simple, mais plus coûteuse ; les API superficielles vous offrent davantage de contrôle et de performances, au prix du déclenchement manuel des mises à jour. Utilisez-les uniquement lorsque le profilage révèle un réel besoin.

Vérification rapide

Vérifiez votre compréhension de la réactivité avancée.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez découvert les mécanismes avancés de contrôle de la réactivité :

shallowRef réagit uniquement à la réaffectation de .value, et non aux modifications internes — ce qui convient aux données volumineuses ou externes.
triggerRef force manuellement les mises à jour après la modification du contenu d’une référence superficielle (regroupez les modifications, puis déclenchez la mise à jour une seule fois).
markRaw exclut définitivement un objet de la réactivité, ce qui est idéal pour les instances de classes tierces.
Ces outils offrent performances et contrôle, au prix du déclenchement manuel des mises à jour.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Réactivité avancée : shallowRef et triggerRef » est-elle gratuite ?

Oui — le texte complet de « Réactivité avancée : shallowRef et triggerRef » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Réactivité avancée : shallowRef et triggerRef » ?

shallowRef pour les performances, markRaw pour exclure de la réactivité et triggerRef pour un déclenchement manuel Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Réactivité avancée : shallowRef et triggerRef » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Réactivité avancée : shallowRef et triggerRef
Fabriques de composables et composables paramétrés
Machines à états avec XState dans Vue
effectScope pour regrouper les effets

← Retour à Vue Academy