Vue 3: Reattività Avanzata

Il sistema di reattività di Vue 3 è completamente riscritto e basato su JavaScript Proxy per performance superiori.

Come funziona la reattività

Vue 3 usa Proxy invece di Object.defineProperty (usato in Vue 2):

import { ref, reactive } from 'vue'

// ref per valori primitivi
const count = ref(0)

// reactive per oggetti
const state = reactive({
  user: { name: 'Mario', email: 'mario@example.com' },
  settings: { theme: 'dark' }
})

Computed Properties

Le computed properties sono cache-ate e si ricalcolano solo quando le dipendenze cambiano:

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

const items = ref([1, 2, 3, 4, 5])

const total = computed(() => {
  return items.value.reduce((sum, item) => sum + item, 0)
})

const evenItems = computed(() => {
  return items.value.filter(item => item % 2 === 0)
})
</script>

Watchers avanzati

import { ref, watch } from 'vue'

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

// Watch con deep option
watch(state, (newVal, oldVal) => {
  console.log('State changed:', newVal)
}, { deep: true })

// Watch multiplo
watch([query, results], ([newQuery, newResults]) => {
  console.log('Query:', newQuery, 'Results:', newResults.length)
})

Conclusione

Capire la reattività è essenziale per scrivere applicazioni Vue efficienti e performanti.