მონაცემთა ცალმხრივი ნაკადი Vue-ში
ყველა შემავალი პარამეტრი ქმნის ცალმხრივ ბმას შვილის თვისებასა და მშობელს შორის: როდესაც მშობელი თვისება განახლდება, ის გადაეცემა შვილს, მაგრამ პირიქით არა. ეს ხელს უშლის შვილი კომპონენტების მიერ მშობელი სტატუსის შემთხვევით ცვლილებას, რამაც შეიძლება გაგიჭირვოთ თქვენი აპლიკაციის მონაცემთა ნაკადის გაგება.
გარდა ამისა, ყოველ ჯერზე, როდესაც მშობელი კომპონენტი განახლდება, შვილი კომპონენტის ყველა შემავალი პარამეტრი განახლდება აქტუალური მნიშვნელობებით. ეს ნიშნავს, რომ არ უნდა ცდილობდეთ შემავალი პარამეტრის შეცვლას შვილი კომპონენტის შიგნით. თუ ამას გააკეთებთ, Vue კონსოლში გამოიტანს გაფრთხილებას.
ჩვეულებრივ, ორი შემთხვევა გვხვდება, როდესაც ჩნდება შემავალი პარამეტრის შეცვლის ცდუნება. მოდით მათ განვიხილოთ.
პირველი შემთხვევა
შემავალი პარამეტრი გამოიყენება საწყისი მნიშვნელობის გადასაცემად; შვილი კომპონენტს სურს მისი გამოყენება, როგორც ლოკალური მონაცემთა თვისების მომავალში. ამ შემთხვევაში, უმჯობესია განისაზღვროს ლოკალური თვისება მონაცემებში, რომელიც იყენებს შემავალი პარამეტრის მნიშვნელობას, როგორც საწყისს:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
მეორე შემთხვევა
შემავალი პარამეტრი გადაეცემა როგორც ნედლი მნიშვნელობა, რომელიც საჭიროებს ტრანსფორმაციას. ამ შემთხვევაში, უმჯობესია განისაზღვროს გამოთვლილი თვისება შემავალი პარამეტრის გამოყენებით:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
შენიშვნა
გაითვალისწინეთ, რომ ობიექტები და მასივები JavaScript-ში გადაეცემა მითითებით, ამიტომ თუ შემავალი პარამეტრი არის მასივი ან ობიექტი, მაშინ ცვლილებები შვილი კომპონენტის შიგნით ამ ობიექტის ან მასივის გავლენას მოახდენს მშობელის სტატუსზე და Vue არ შეუძლია ამის შესახებ გაფრთხილება. უნდა ავიცილოთ ნებისმიერი მუტაცია შემავალ პარამეტრებში, მათ შორის ობიექტებსა და მასივებში, რადგან მონაცემთა ცალმხრივი შეკრულობის იგნორირება შეიძლება გამოიწვიოს არასასურველი შედეგები.
