Vue — Cheat Sheet

Tag: vue, javascript, typescript, frontend, reactivity, composition-api

Livello: intermedio

TL;DR: Sintesi rapida dell'ecosistema Vue.js: reattività con Composition API (ref, reactive), ciclo di vita dei componenti, gestione dello stato e ottimizzazioni chiave per colloqui frontend.

Concetti chiave

Vue usa un Virtual DOM abbinato a un sistema di reattività basato su Proxy di JavaScript.

La Composition API organizza la logica di business per feature tramite composable riutilizzabili.

L'Options API struttura il componente in sezioni rigide: data, methods, computed, watch.

ref incapsula qualsiasi valore in un wrapper reattivo accessibile tramite la proprietà .value.

reactive crea proxy reattivi profondi applicabili esclusivamente a oggetti, array e collezioni.

computed genera valori derivati cached, ricalcolati solo quando cambiano le relative dipendenze reattive.

watch osserva sorgenti specifiche per eseguire side-effect in risposta al cambiamento dei dati.

v-model fornisce binding bidirezionale sincronizzando la prop modelValue con l'evento update:modelValue.

Gli hook del ciclo di vita principali sono onMounted, onUpdated e onUnmounted.

Pinia gestisce lo stato globale centralizzato eliminando il concetto di mutation rispetto a Vuex.

Domande tipiche e risposte pronte

Q: Qual è la differenza principale tra ref e reactive in Vue 3?R: ref accetta primitivi o oggetti e richiede .value nello script, mentre reactive funziona solo con oggetti ma non richiede .value. Preferisco usare ref come standard coerente per evitare la perdita di reattività durante il destructuring.

Q: Come si evita di perdere la reattività estraendo proprietà da un oggetto reattivo?R: Non destrutturo direttamente l'oggetto reactive, ma utilizzo l'utility toRefs o toRef. In questo modo ogni singola proprietà viene convertita in un ref mantenendo intatto il collegamento reattivo.

Q: Quando conviene usare computed invece di un metodo in un template?R: Uso computed per calcoli che dipendono da altri stati reattivi perché memorizza il risultato in cache. Un metodo verrebbe invece rivalutato a ogni singolo re-render del componente, impattando sulle performance.

Insidie e errori comuni

Destrutturare un oggetto reactive senza toRefs distrugge il collegamento del Proxy reattivo.

Dimenticare .value quando si accede o modifica un ref all'interno del blocco <script>.

Modificare lo stato globale o causare side-effect asincroni all'interno di una proprietà computed.

Usare l'indice dell'array come attributo :key nei cicli v-for con elementi dinamici o riordinabili.

Assegnare un nuovo oggetto direttamente a una variabile reactive sovrascrivendo l'istanza del Proxy.

Snippet e comandiSnippet di codice

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const count = ref<number>(0)
const doubleCount = computed(() => count.value * 2)

function increment(): void {
  count.value++
}

onMounted(() => {
  console.log(`Component mounted. Initial count: ${count.value}`)
})
</script>

<template>
  <button @click="increment">
    Count: {{ count }} (Double: {{ doubleCount }})
  </button>
</template>

TypeScript

```import { reactive, toRefs } from 'vue'

interface UserState {

name: string

role: string

}

const state = reactive<UserState>({

name: 'Umberto',

role: 'Developer'

})

// Mantiene la reattività nel destructuring

const { name, role } = toRefs(state)

```

Da ripassare

[ ] Meccanismo di reattività interno basato su ES6 Proxy e Track/Trigger

[ ] Gestione dei componenti asincroni con defineAsyncComponent e <Suspense>

[ ] Differenze tra watch e watchEffect nella cattura automatica delle dipendenze

[ ] Pattern di comunicazione tra componenti via provide e inject

[x] Sintassi e utilizzo standard di <script setup>

Jarvis Interviews
Jarvis