1. v-memo

v-memo est une directive qui mémoïse un sous-arbre du template. Vue saute entièrement le re-rendu de l'élément (et de ses enfants) si toutes les valeurs du tableau de dépendances restent identiques (===) par rapport au dernier rendu.

Syntaxe

<!-- Ne re-rend que si item.id ou selected change -->
<div v-memo="[item.id, selected]">
  {{ item.name }} — {{ selected ? '✓' : '' }}
</div>

Cas d'usage typique — liste avec sélection

<template>
  <ul>
    <li
      v-for="item in list"
      :key="item.id"
      v-memo="[item.id === selectedId]"
    >
      <!-- Ce li ne re-rend que si son statut sélectionné change -->
      {{ item.name }}
      <span v-if="item.id === selectedId">✓</span>
    </li>
  </ul>
</template>

v-once — encore plus radical

<!-- Rendu UNE SEULE FOIS, jamais mis à jour -->
<div v-once>
  <h1>{{ title }}</h1>
  <p>Contenu statique après montage</p>
</div>

Comparaison v-once vs v-memo

2. shallowRef / shallowReactive

Par défaut, ref() et reactive() créent une réactivité profonde : Vue traverse récursivement toutes les propriétés imbriquées pour les rendre réactives. Pour des objets très grands (centaines de propriétés), ce coût de tracking est évitable.

shallowRef — réactivité superficielle

import { shallowRef, triggerRef } from 'vue'

// Seule la ref elle-même est réactive (pas ses propriétés internes)
const bigObject = shallowRef({
  data: Array.from({ length: 10000 }, (_, i) => ({ id: i, value: Math.random() }))
})

// Pour forcer une mise à jour après mutation interne :
bigObject.value.data[0].value = 99
triggerRef(bigObject) // force Vue à re-rendre

shallowReactive — objet superficiellement réactif

import { shallowReactive } from 'vue'

const state = shallowReactive({
  count: 0,           // réactif
  nested: { x: 1 }   // NON réactif en profondeur
})

state.count++         // ✓ déclenche un re-rendu
state.nested.x++      // ✗ ne déclenche PAS de re-rendu

markRaw — empêcher toute réactivité

import { reactive, markRaw } from 'vue'

// Cas typique : bibliothèque tierce (Chart.js, Three.js...)
import Chart from 'chart.js'

const state = reactive({
  chartInstance: markRaw(new Chart(...)), // Vue ne rend pas Chart réactif
  count: 0
})

Comparatif réactivité

3. defineAsyncComponent

Par défaut, Vue bundle tous les composants ensemble. defineAsyncComponent permet de charger un composant à la demande (lazy loading), réduisant la taille du bundle initial.

Syntaxe simple

import { defineAsyncComponent } from 'vue'

// Le composant n'est chargé que lorsqu'il est nécessaire
const HeavyChart = defineAsyncComponent(
  () => import('./components/HeavyChart.vue')
)

Avec options — loading, error, délai

const AsyncChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),

  // Composant affiché pendant le chargement
  loadingComponent: LoadingSpinner,

  // Composant affiché en cas d'erreur
  errorComponent: ErrorDisplay,

  // Délai avant d'afficher le loading (évite le flash)
  delay: 200,

  // Timeout avant de passer en erreur
  timeout: 5000
})

Avec Suspense (Vue 3)

<template>
  <Suspense>
    <!-- Contenu async -->
    <template #default>
      <AsyncUserProfile />
    </template>

    <!-- Fallback pendant le chargement -->
    <template #fallback>
      <div>Chargement du profil...</div>
    </template>
  </Suspense>
</template>

Simuler en CDN (sans build tool)

// En CDN, on simule avec un composant qui se charge après un délai
const AsyncComponent = defineAsyncComponent(() =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve({
        template: '<div>Composant chargé !</div>'
      })
    }, 1500)
  })
)

4. Clés stables dans v-for

L'attribut :key permet à Vue de suivre l'identité des éléments dans une liste. Un mauvais choix de clé entraîne des re-rendus inutiles, voire des bugs de state.

Problème avec l'index comme clé

<!-- ❌ MAUVAIS : l'index change quand on insère/supprime -->
<li v-for="(item, index) in items" :key="index">
  <input v-model="item.value" />
</li>

<!-- Si on insère un item au début :
     - item[0] avait key=0, maintenant key=0 est un nouvel item
     - Vue réutilise le DOM existant → les inputs ont des valeurs décalées ! -->

Solution : ID stable

<!-- ✓ BON : l'ID reste constant même si l'ordre change -->
<li v-for="item in items" :key="item.id">
  <input v-model="item.value" />
</li>

Générer des IDs uniques

import { ref } from 'vue'

let nextId = 1
function createItem(value) {
  return { id: nextId++, value, done: false }
}

const items = ref([
  createItem('Apprendre Vue'),
  createItem('Maîtriser Pinia')
])

Quand l'index est acceptable

5. Computed vs méthodes dans les templates

Un computed() est mémoïsé : Vue ne le recalcule que si ses dépendances réactives changent. Une méthode dans le template est appelée à chaque re-rendu, même si rien de pertinent n'a changé.

Exemple — méthode vs computed

<script setup>
import { ref, computed } from 'vue'

const items = ref([/* 10 000 items */])
const query = ref('')
const unrelated = ref(0) // ne concerne pas le filtre

// ❌ MÉTHODE : recalculée à CHAQUE re-rendu
// Si unrelated change, filteredMethod est rappelée inutilement
function filteredMethod() {
  console.log('méthode appelée')
  return items.value.filter(i => i.name.includes(query.value))
}

// ✓ COMPUTED : recalculée SEULEMENT si items ou query change
const filteredComputed = computed(() => {
  console.log('computed recalculé')
  return items.value.filter(i => i.name.includes(query.value))
})
</script>

<template>
  <button @click="unrelated++">Autre action ({{ unrelated }}x)</button>
  <input v-model="query" />

  <!-- La méthode se relance à chaque click sur le bouton -->
  <li v-for="i in filteredMethod()">...</li>

  <!-- Le computed reste mémoïsé -->
  <li v-for="i in filteredComputed">...</li>
</template>

Règle simple

6. Vue DevTools

Vue DevTools est l'outil de débogage officiel de Vue, disponible comme extension Chrome/Firefox ou en tant que plugin Vite. Il offre une inspection en profondeur de l'arbre de composants, du state, des événements et des performances.

Installation

# Extension navigateur
# Chrome : https://chrome.google.com/webstore/detail/vuejs-devtools
# Firefox : https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/

# Plugin Vite (Vue DevTools v7+)
npm install -D vite-plugin-vue-devtools

Plugin Vite (vite.config.ts)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    VueDevTools() // Ouvre l'UI à http://localhost:5173/__devtools__/
  ]
})

Fonctionnalités clés

Astuce profiling

// Dans le code, pour mesurer un rendu :
import { onUpdated } from 'vue'

onUpdated(() => {
  console.log('Re-rendu à', performance.now().toFixed(2), 'ms')
})