Sobes.tech
Middle

Ar įvyks pakartotinis atvaizdavimas, kai duomenims iš eilės priskiriama daug reikšmių?

sobes.tech AI

Atsakymas iš AI

Taip, tai įvyks. Nors ne kiekvieno priskyrimo metu.

Vue naudoja reaktyvią sistemą. Kai priskiriate naują reikšmę reaktyviai savybei data, Vue seka šią pakeitimą.

Sekvenciniai pakeitimai tame pačiame kodo bloke (pavyzdžiui, įvykio tvarkyklėje ar gyvenimo ciklo hook'e) paprastai sukelia vieną planuojamą atnaujinimą (perpiešimą). Vue buferuoja šiuos pakeitimus ir taiko juos asinchroniškai kitame "tick" ciklo, siekiant išvengti perteklinių perpiešimų.

Pavyzdys:

// Vue komponentas
export default {
  data() {
    return {
      count: 0,
      message: 'Labas'
    };
  },
  methods: {
    updateData() {
      // Du iš eilės priskyrimai
      this.count = this.count + 1;
      this.message = 'Atnaujinta: ' + this.count;
      // Vue čia planuos *vieną* DOM atnaujinimą kitame "tick"
    }
  }
}

Šiame pavyzdyje abu pakeitimai (this.count ir this.message) įvyksta reaktyviose duomenyse, tačiau Vue atliks tik vieną perpiešimą po updateData vykdymo pabaigos (arba, tiksliau, kitame "tick"-e).

Tačiau, jei atliekate priskyrimus skirtinguose asinchroniniuose kontekstuose (pavyzdžiui, skirtinguose setTimeout ar pažaduose), kiekvienas toks pakeitimas gali potencialiai sukelti atskirą perpiešimą.

Todėl, "daugybiniai priskyrimai data eilės tvarka" viename sinchroniniame bloke, Vue tikėtina, atliks vieną perpiešimą, kuris atspindės visus pakeitimus. Bet faktas, kad keičiate reaktyvius duomenis, visada sukelia planavimą atnaujinimui, kuris galų gale sukels DOM perpiešimą.