Տվյալների միակողմանի հոսք Vue-ում
Բոլոր մուտքային պարամետրերը կազմում են միակողմանի կապը երեխայի հատկության և ծնողի միջև. Երբ ծնողի հատկությունը թարմացվում է, այն կփոխանցվի երեխային, բայց ոչ հակառակը: Սա կանխում է երեխայի կոմպոնենտների կողմից ծնողի վիճակի պատահական փոփոխությունը, ինչը կարող է դժվարացնել ձեր հավելվածի տվյալների հոսքի հասկացողությունը:
Բացի այդ, ամեն անգամ, երբ թարմացվում է ծնող կոմպոնենտը, երեխայի կոմպոնենտի բոլոր մուտքային պարամետրերը կթարմացվեն արդիական արժեքներով: Սա նշանակում է, որ դուք չպետք է փորձեք փոխել մուտքային պարամետրը երեխայի կոմպոնենտի ներսում: Եթե դա անեք, Vue-ն կցուցադրի նախազգուշացում կոնսոլում:
Սովորաբար հանդիպում են երկու դեպք, երբ առաջանում է մուտքային պարամետրը փոխելու գայթակղություն: Եկեք դիտարկենք դրանք:
Առաջին դեպք
Մուտքային պարամետրը օգտագործվում է սկզբնական արժեքը փոխանցելու համար; երեխայի կոմպոնենտը ցանկանում է օգտագործել այն որպես տեղական տվյալների հատկություն հետագայում: Այս դեպքում ամենալավն է սահմանել տեղական տվյալների հատկություն, որն օգտագործում է մուտքային պարամետրի արժեքը որպես սկզբնական:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Երկրորդ դեպք
Մուտքային պարամետրը փոխանցվում է որպես անմշակ արժեք, որը պետք է վերափոխել: Այս դեպքում ամենալավն է սահմանել հաշվարկված հատկություն՝ օգտագործելով մուտքային պարամետրը:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Ծանոթագրություն
Ուշադրություն դարձրեք, որ օբյեկտները և զանգվածները JavaScript-ում փոխանցվում են հղումով, ուստի եթե մուտքային պարամետրը զանգված կամ օբյեկտ է, ապա դրա ներսում փոփոխությունները երեխայի կոմպոնենտում կազդեն ծնողի վիճակի վրա, և Vue-ն անկարող է նախազգուշացնել այդ մասին: Պետք է խուսափել մուտքային պարամետրերի ցանկացած մուտացիայից, ներառյալ օբյեկտները և զանգվածները, քանի որ տվյալների միակողմանի կապի անտեսումը կարող է հանգեցնել անցանկալի արդյունքների:
