Options API Deep-dive

Preview — 3 of 10 questions

Quelle est la différence entre watch et watchEffect ?

javascript

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

const query = ref('')
const results = ref([])

// Option A
watch(query, (newVal) => {
  fetchResults(newVal)
})

// Option B
watchEffect(() => {
  fetchResults(query.value)
})
</script>

Awatch est synchrone, watchEffect est asynchrone

BwatchEffect ne peut observer qu'une seule variable ; watch peut en observer plusieurs

Cwatch observe explicitement une source et donne accès à l'ancienne et la nouvelle valeur — il ne s'exécute pas au démarrage par défaut. watchEffect collecte automatiquement ses dépendances et s'exécute immédiatement

DLes deux sont identiques — watchEffect est un alias de watch

Quest-ce quun composable en Vue 3 et pourquoi est-ce préférable aux mixins ?

javascript

// useCounter.js
import { ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  function increment() { count.value++ }
  function reset() { count.value = initial }
  return { count, increment, reset }
}

AUn composable est une fonction qui encapsule de la logique stateful réutilisable avec la Composition API — contrairement aux mixins, les sources des variables sont claires, il n'y a pas de conflits de noms, et le typage TypeScript est naturel

BLes composables sont des fichiers CSS — ils n'ont rien à voir avec la logique Vue

CLes composables remplacent les composants — on n'a plus besoin de .vue avec eux

DLes composables ne peuvent pas contenir de lifecycle hooks

Quand utiliser provide/inject plutôt que les props ?

javascript

<!-- GrandParent.vue -->
<script setup>
import { provide, ref } from 'vue'

const theme = ref('dark')
provide('theme', theme)
</script>

<!-- DeepChild.vue (plusieurs niveaux plus bas) -->
<script setup>
import { inject } from 'vue'

const theme = inject('theme', 'light') // 'light' = default
</script>

Aprovide/inject remplacent toujours les props — on ne devrait plus jamais utiliser les props

Bprovide ne peut passer que des valeurs primitives (string, number)

Cinject crée une copie locale non réactive — les changements du parent ne sont pas répercutés

Dprovide/inject servent à partager des données à travers plusieurs niveaux de composants sans prop drilling — idéal pour les thèmes, les configs, ou les services partagés dans un sous-arbre

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