Advanced Patterns

Preview — 3 of 10 questions

Comment fonctionne le système de réactivité de Vue 3 sous le capot ?

javascript

// Vue 3 pseudo-code (simplified)
let activeEffect = null

function track(target, key) {
  if (activeEffect) {
    // store: target → key → Set of effects
    getOrCreateDep(target, key).add(activeEffect)
  }
}

function trigger(target, key) {
  getOrCreateDep(target, key).forEach(effect => effect())
}

AVue 3 utilise des Proxy JavaScript pour intercepter les accès et mutations — au moment du rendu (ou dans watchEffect), l'effet actif est enregistré comme dépendant de chaque propriété lue. Toute mutation déclenche les effets dépendants

BVue utilise Object.observe() (deprecated) pour détecter les changements

CVue polling vérifie toutes les données réactives toutes les 16ms (par requestAnimationFrame)

DVue 3 utilise Object.defineProperty comme Vue 2, avec des getters/setters

Quand utiliser shallowRef au lieu de ref ?

javascript

import { ref, shallowRef } from 'vue'

// Deep reactive (default)
const deepState = ref({ user: { profile: { name: 'Alice' } } })

// Shallow reactive
const shallowState = shallowRef({ user: { profile: { name: 'Alice' } } })

// Which triggers a re-render?
deepState.value.user.profile.name = 'Bob'   // ?
shallowState.value.user.profile.name = 'Bob' // ?

AdeepState déclenche un re-render (réactivité profonde). shallowState ne déclenche pas de re-render car shallowRef ne réagit qu'au remplacement de .value, pas aux mutations imbriquées

BLes deux déclenchent un re-render — ref et shallowRef sont identiques pour les objets

CAucun ne déclenche de re-render — il faut appeler triggerRef() manuellement dans les deux cas

DshallowRef est plus rapide mais devient automatiquement profond après 2 niveaux d'imbrication

Pourquoi ce code ne fonctionne-t-il pas comme prévu ?

javascript

<!-- Child.vue -->
<script setup>
const secretMethod = () => console.log('secret')
const publicMethod = () => console.log('public')
</script>

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
const childRef = ref()
// After mount:
childRef.value.secretMethod() // ❌ Error?
childRef.value.publicMethod() // ❌ Error?
</script>

ALes template refs ne fonctionnent pas avec <script setup> — utiliser Options API

BIl faut utiliser ref() à l'intérieur du composant enfant pour que les méthodes soient accessibles

CAvec <script setup>, le composant est fermé par défaut — aucune méthode n'est accessible depuis le parent. Il faut utiliser defineExpose() pour exposer explicitement les membres publics

DLe parent doit appeler childRef.value.$el.publicMethod() pour accéder aux méthodes

Answer all 10 questions (7 more), see explanations for every answer, and track your score.