Vue Expert

Preview — 3 of 10 questions

Vue 3 compile les templates en render functions optimisées. Que fait ce flag PatchFlags ?

javascript

// Compiled output of:
// <div :class="cls">{{ msg }}</div>

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx) {
  return (_openBlock(), _createElementBlock("div", {
    class: _normalizeClass(_ctx.cls)
  }, _toDisplayString(_ctx.msg), 3 /* TEXT, CLASS */))
}

A3 est l'index du nœud dans le Virtual DOM — une optimisation de recherche

B3 indique que l'élément a 3 enfants

C3 est un PatchFlag bitmask — 1 = TEXT, 2 = CLASS, donc 3 = TEXT | CLASS. Vue sait à la compilation quelles parties sont dynamiques, et ne vérifie que celles-ci lors du diffing — pas l'intégralité du nœud

DPatchFlags sont uniquement utiles pour le SSR — en client-side Vue utilise un diff complet

À quoi sert effectScope et dans quel cas l'utiliser ?

javascript

import { effectScope, ref, watchEffect, computed } from 'vue'

function createFeature() {
  const scope = effectScope()

  scope.run(() => {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    watchEffect(() => console.log(count.value))
    // All effects registered here belong to this scope
  })

  return {
    stop: () => scope.stop() // stops all effects at once
  }
}

AeffectScope crée un Worker thread séparé pour les effets réactifs

BeffectScope regroupe des effets réactifs (computed, watch, watchEffect) pour les arrêter tous ensemble — utile pour les stores, les plugins, ou les composables qui s'activent/désactivent dynamiquement

CeffectScope est équivalent à onScopeDispose — ce sont des alias

DLes effets créés dans un effectScope ne sont jamais garbage collectés

Comment écrire un composable qui accepte à la fois des valeurs statiques et des refs ?

javascript

import { toValue, watchEffect, ref } from 'vue'

function useFetch(url) {
  const data = ref(null)

  watchEffect(() => {
    // Works whether url is a string, ref, or getter function
    const resolvedUrl = toValue(url)
    fetch(resolvedUrl).then(r => r.json()).then(d => data.value = d)
  })

  return { data }
}

// All these usages work:
useFetch('/api/static')           // plain string
useFetch(ref('/api/dynamic'))     // ref
useFetch(() => `/api/${userId}`)  // getter (reactive)

AtoValue() résout une source en sa valeur actuelle — si c'est une ref, retourne .value ; si c'est une fonction, l'appelle ; sinon retourne la valeur telle quelle. Cela permet aux composables d'être "MaybeRef-aware"

BtoValue() convertit n'importe quelle valeur en string

CtoValue() est identique à unref() — même comportement

DtoValue() n'existe pas en Vue 3 — c'est resolveValue() le nom correct

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