Vue.js

Aspetto

In questa pagina

Le basi della Reattività ​

Preferenza dull'API

Questa pagina e molti altri capitoli più avanti nella guida contengono contenuti diversi per l'Options API e la Composition API. La tua preferenza attuale è Options APIComposition API. Puoi alternare tra gli stili delle API utilizzando gli interruttori "Preferenza API" nella parte superiore della barra laterale sinistra.

Dichiarare lo Stato Reattivo ​

Con l'Options API, utilizziamo l'opzione data per dichiarare lo stato reattivo di un componente. Il valore dell'opzione dovrebbe essere una funzione che restituisce un oggetto. Vue chiamerà la funzione quando creerà una nuova istanza del componente e includerà l'oggetto restituito nel suo sistema di reattività. Qualsiasi proprietà di primo livello di questo oggetto viene eseguita tramite proxy sull'istanza del componente (this nei metodi e negli hook del ciclo di vita):

js
export default {
  data() {
    return {
      count: 1
    }
  },

   // `mounted` è un hook del ciclo di vita che spiegheremo più avanti
  mounted() {
    // `this` si riferisce all'istanza del componente.
    console.log(this.count) // => 1

    // i dati possono anche essere modificati
    this.count = 2
  }
}

Prova nel Playground

Queste proprietà dell'istanza vengono aggiunte solo quando l'istanza viene creata per la prima volta, quindi è necessario assicurarsi che siano tutte presenti nell'oggetto restituito dalla funzione data. Se necessario utilizza null, undefined o qualche altro valore segnaposto per le proprietà in cui il valore desiderato non è ancora disponibile.

È possibile aggiungere una nuova proprietà direttamente a this senza includerla in data. Tuttavia, le proprietà aggiunte in questo modo non saranno in grado di innescare aggiornamenti reattivi.

Vue utilizza un prefisso $ quando espone le proprie API native tramite l'istanza del componente. Riserva anche il prefisso _ per le proprietà interne. Dovresti evitare di utilizzare nomi per le proprietà di primo livello in data che iniziano con uno di questi caratteri.

Reactive Proxy vs. Original ​

In Vue 3, data is made reactive by leveraging JavaScript Proxies. Users coming from Vue 2 should be aware of the following edge case:

js
export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

Quando accedi a this.someObject dopo averlo assegnato, il valore è un proxy reattivo del newObject originale. A differenza di Vue 2, il newObject originale rimane intatto e non viene reso reattivo: assicurati di accedere sempre allo stato reattivo come proprietà di this.

Dichiarare lo Stato Reattivo ​

ref() ​

Nella Composition API, il modo consigliato per dichiarare lo stato reattivo è utilizzare la funzione ref():

js
import { ref } from 'vue'

const count = ref(0)

ref() prende l'argomento e lo restituisce racchiuso in un oggetto ref con una proprietà .value:

js
const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

Vedi anche: Typing Refs

Per accedere alle ref nel template di un componente, bisogna dichiararle e restituirle tramite la funzione setup() del componente stesso:

js
import { ref } from 'vue'

export default {
  // `setup` è un hook speciale dedicato alla Composition API.
  setup() {
    const count = ref(0)

    // espone la ref per il template
    return {
      count
    }
  }
}
template
<div>{{ count }}</div>

Da notare che non abbiamo avuto bisogno di aggiungere .value quando abbiamo utilizzato la ref nel template. Per comodità, le ref vengono automaticamente estratte quando utilizzate all'interno dei template (con alcune limitazioni).

Puoi anche modificare direttamente una ref nei gestori di eventi (event handlers):

template
<button @click="count++">
  {{ count }}
</button>

Per una logica più complessa, possiamo dichiarare funzioni che modificano le ref nello stesso scope ed esporle come metodi insieme allo stato:

js
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // .value è necessario in JavaScript
      count.value++
    }

    // non dimenticare di esporre anche la funzione.
    return {
      count,
      increment
    }
  }
}

I metodi esposti possono quindi essere utilizzati come gestori di eventi (event handlers):

template
<button @click="increment">
  {{ count }}
</button>

Ecco l'esempio dal vivo su Codepen, senza utilizzare alcuno strumento di compilazione.

<script setup>