Sobes.tech
Middle

Vai notiks atkārtota attēlošana, ja datā secīgi piešķirs vairākas vērtības?

sobes.tech AI

Atbilde no AI

Jā, tas notiks. Lai gan ne katru piešķiršanu.

Vue izmanto reaktīvu sistēmu. Kad piešķirat jaunu vērtību reaktīvai īpašībai data, Vue seko šai izmaiņai.

Secīgas izmaiņas tajā pašā koda blokā (piemēram, notikuma apstrādātājā vai dzīves cikla hook'ā) parasti noved pie viena plānotā atjauninājuma (pārrenderēšanas). Vue buferē šīs izmaiņas un tās piemēro asenhroni, nākamajā "tick" ciklā, lai izvairītos no liekiem pārrenderējumiem.

Piemērs:

// Vue komponenta
export default {
  data() {
    return {
      count: 0,
      message: 'Sveiki'
    };
  },
  methods: {
    updateData() {
      // Divas secīgas piešķiršanas
      this.count = this.count + 1;
      this.message = 'Atjaunināts: ' + this.count;
      // Vue šeit plānos *vienu* DOM atjauninājumu nākamajā "tick"-ā
    }
  }
}

Šajā piemērā abas izmaiņas (this.count un this.message) notiek reaktīvos datos, bet Vue veiks tikai vienu pārrenderēšanu pēc updateData izpildes beigām (vai, precīzāk, nākamajā "tick"-ā).

Tomēr, ja veicat piešķiršanas dažādos asinhronos kontekstos (piemēram, dažādos setTimeout vai solījumos), katra šāda izmaiņa potenciāli var izraisīt atsevišķu pārrenderēšanu.

Tādēļ, "vairāku vērtību piešķiršana data secīgi" vienā sinhronā blokā, Vue, iespējams, veiks vienu pārrenderēšanu, kas atspoguļos visas izmaiņas. Bet pats fakts, ka maināt reaktīvos datus, vienmēr noved pie plānošanas atjauninājumam, kas galarezultātā novedīs pie DOM pārrenderēšanas.