Sobes.tech
Middle

Va avea o re-redare la atribuirea multiplă a valorilor în data?

sobes.tech AI

Răspuns de la AI

Da, va fi. Deși nu la fiecare atribuire.

Vue folosește un sistem reactiv. Când atribui o nouă valoare unei proprietăți reactive din data, Vue urmărește această schimbare.

Schimbările secvențiale într-un același bloc de cod (de exemplu, în interiorul unui handler de evenimente sau al unui hook al ciclului de viață) duc de obicei la o singură actualizare planificată (re-redare). Vue bufferizează aceste schimbări și le aplică asincron în următorul "tick" al ciclului de actualizare, pentru a evita re-redările redundante.

Exemplu:

// Componente Vue
export default {
  data() {
    return {
      count: 0,
      message: 'Salut'
    };
  },
  methods: {
    updateData() {
      // Două atribuiri consecutive
      this.count = this.count + 1;
      this.message = 'Actualizat: ' + this.count;
      // Vue va programa aici *o* actualizare a DOM-ului în următorul "tick"
    }
  }
}

În acest exemplu, ambele modificări (this.count și this.message) apar în date reactive, dar Vue va efectua o singură re-redare după finalizarea execuției updateData (sau, mai precis, în următorul "tick").

Totuși, dacă faci atribuiri în diferite contexte asincrone (de exemplu, în diferite setTimeout sau promisiuni), fiecare astfel de schimbare poate provoca potențial o re-redare separată.

Prin urmare, în cazul "atribuirii multiple de valori în data consecutiv" în interiorul unui bloc sincron, Vue va realiza probabil o re-redare care va reflecta toate schimbările. Dar faptul că modifici date reactive duce întotdeauna la o planificare a actualizării, care în cele din urmă va duce la o re-redare a DOM-ului.