Vue 3: Introduzione

Vue.js è un framework JavaScript progressivo per la costruzione di interfacce utente. Vue 3 introduce la Composition API e un sistema di reattività completamente riscritto.

Cos'è Vue 3?

Vue 3 è la versione più recente del framework Vue.js, progettato per essere:

• Progressivo - Adottabile gradualmente nel tuo progetto
• Versatile - Adatto a progetti piccoli e grandi
• Performante - Sistema di reattività ottimizzato
• Modulare - Tree-shaking per bundle più piccoli

Creare un'app Vue 3

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Composition API

La Composition API è il nuovo modo di organizzare la logica nei componenti:

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

// Stato reattivo
const count = ref(0)
const message = ref('Ciao Vue 3!')

// Proprietà computate
const doubleCount = computed(() => count.value * 2)

// Metodi
const increment = () => {
  count.value++
}

// Lifecycle hook
onMounted(() => {
  console.log('Componente montato!')
})
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">Incrementa</button>
  </div>
</template>

Reactivity: ref e reactive

import { ref, reactive } from 'vue'

// ref - per valori primitivi
const count = ref(0)
console.log(count.value) // accedere con .value

// reactive - per oggetti
const state = reactive({
  nome: 'Mario',
  eta: 30,
  ruoli: ['admin', 'user']
})
console.log(state.nome) // accesso diretto

Props ed Emits

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['update', 'delete'])

const updateCount = () => {
  emit('update', props.count + 1)
}
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent 
    title="Esempio" 
    :count="count" 
    @update="count = $event"
  />
</template>

Watch e WatchEffect

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

const query = ref('')

// watch - esplicito
watch(query, (newVal, oldVal) => {
  console.log(`Query cambiata da ${oldVal} a ${newVal}`)
})

// watchEffect - automatico
watchEffect(() => {
  console.log('Query attuale:', query.value)
})

Slots

<!-- Card.vue -->
<template>
  <div class="card">
    <header>
      <slot name="header">Header di default</slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- Utilizzo -->
<Card>
  <template #header>
    <h2>Titolo personalizzato</h2>
  </template>
  <p>Contenuto della card</p>
</Card>

Direttive built-in

<template>
  <!-- Binding di attributi -->
  <img :src="imageUrl" :alt="imageAlt" />
  
  <!-- Event listeners -->
  <button @click="handleClick">Clicca</button>
  
  <!-- Rendering condizionale -->
  <p v-if="isVisible">Visibile</p>
  <p v-else>Nascosto</p>
  
  <!-- Rendering di liste -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  
  <!-- Two-way binding -->
  <input v-model="searchQuery" />
  
  <!-- HTML rendering -->
  <div v-html="rawHtml"></div>
</template>

Conclusione

Vue 3 con la Composition API offre un modo più flessibile e type-safe di organizzare la logica dei componenti. È un framework potente ma accessibile, perfetto per progetti di qualsiasi dimensione.