Կա՞ր է կրկնակի ռենդեր՝ տվյալների մեջ մի քանի արժեքներ հերթականորեն նշանակելիս։

Այո, կլինի։ Հիշեք, որ դա տեղի կունենա ոչ ամեն անգամ նշանակման ժամանակ։

Vue-ն օգտագործում է ռեակտիվ համակարգ։ Երբ դուք նշանակում եք նոր արժեք ռեակտիվ հատկությանը data-ում, Vue-ն հետևում է այդ փոփոխությանը։

Կատարած փոփոխությունները նույն կոդի բլոկում (օրինակ, իրադարձության handler կամ կյանքի ցիկլի hook-ի ներսում) սովորաբար հանգեցնում են մի պլանավորված թարմացման (վերաներկայացում)։ Vue-ն բուֆերային է պահում այդ փոփոխությունները և դրանք կիրառում է ասինխրոնորեն հաջորդ "tick"-ում՝ թարմացման ցիկլի, որպեսզի խուսափի ավելորդ վերաներկայացումներից։

Օրինակ՝

// Vue կոմպոնենտ
export default {
  data() {
    return {
      count: 0,
      message: 'Բարև'
    };
  },
  methods: {
    updateData() {
      // Երկու հաջորդական նշանակումներ
      this.count = this.count + 1;
      this.message = 'Թարմացվել է՝ ' + this.count;
      // Vue այստեղ պլանավորելու է *մի* DOM վերաներկայացում հաջորդ "tick"-ում
    }
  }
}

Այս օրինակով, երկու փոփոխություններն էլ (this.count և this.message) տեղի կունենան ռեակտիվ տվյալներում, բայց Vue-ն միայն մեկ անգամ կկատարի վերաներկայացում updateData-ի ավարտից հետո (կամ, ավելի ճշգրիտ, հաջորդ "tick"-ում):

Սակայն, եթե դուք կատարեք նշանակումներ տարբեր ասինխրոն կոնտեքստներում (օրինակ՝ տարբեր setTimeout-ներում կամ խոստումներում), յուրաքանչյուր այդ փոփոխությունը կարող է հնարավոր է՝ հանգեցնել առանձին վերաներկայացման։

Ուստի, երբ "մի շարք տվյալների նշանակումներ` հաջորդաբար" կատարվում է նույն սինխրոն բլոկում, Vue-ն հավանական է, որ կկատարի մի վերաներկայացում, որը կարտացոլի բոլոր փոփոխությունները։ Բայց այն փաստը, որ դուք փոփոխում եք ռեակտիվ տվյալները, միշտ հանգեցնում է թարմացման պլանավորման, որը վերջում կհանգեցնի DOM-ի վերաներկայացման։