Vue တွင် တစ်ခုတည်းသော ဒေတာ စီးဆင်းမှု

အချက်အလက် အားလုံးသည် ကလေး property နှင့် မိဘ property အကြား တစ်ဖက်သတ် ချိတ်ဆက်မှုတစ်ခု ဖြစ်ပေါ်စေသည်- မိဘ property ကို အပ်ဒိတ်လုပ်သောအခါ၊ ၎င်းသည် ကလေးသို့ လွှဲပြောင်းပေးမည်၊ သို့သော် ပြောင်းပြန်မဟုတ်ပါ။ ဤသည်သည် ကလေး component များမှ မိဘ၏ state ကို မတော်တဆ ပြောင်းလဲခြင်းကို ကာကွယ်ပေးပြီး၊ သင်၏ application ၏ ဒေတာ စီးဆင်းမှုကို နားလည်ရန် ခက်ခဲစေနိုင်သည်။

ထို့အပြင်၊ မိဘ component ကို အပ်ဒိတ်လုပ်သည့်အခါတိုင်း၊ ကလေး component ၏ အချက်အလက် အားလုံးကို လက်ရှိတန်ဖိုးများဖြင့် အပ်ဒိတ်လုပ်မည်ဖြစ်သည်။ ဆိုလိုသည်မှာ ကလေး component အတွင်း အချက်အလက်ကို ပြောင်းလဲရန် ကြိုးစားခြင်း မပြုသင့်ပါ။ သင်ဤသို့လုပ်ပါက၊ Vue သည် console တွင် သတိပေးချက်ကို ပြသမည်။

အချက်အလက်ကို ပြောင်းလဲရန် ဖျားယောင်းသွေးဆောင်မှု ပေါ်ပေါက်လေ့ရှိသည့် အခြေအနေ နှစ်မျိုးရှိသည်။ ထိုအရာများကို ကြည့်ရှုကြပါစို့။

ပထမအခြေအနေ

ကနဦးတန်ဖိုးကို ပို့ဆောင်ရန် အချက်အလက်ကို အသုံးပြုသည်။ ကလေး component သည် နောက်ပိုင်းတွင် ၎င်းကို local data property အဖြစ် အသုံးပြုလိုသည်။ ဤအခြေအနေတွင်၊ အချက်အလက်၏ တန်ဖိုးကို ကနဦးတန်ဖိုးအဖြစ် အသုံးပြုသည့် data အတွင်း local property တစ်ခုကို သတ်မှတ်ခြင်းသည် အကောင်းဆုံးဖြစ်သည်-

props: ['initialCounter'],
data() {
	return {
		counter: this.initialCounter
	};
}

ဒုတိယအခြေအနေ

အချက်အလက်ကို ကိုင်တွယ်ရန် လိုအပ်သည့် ကုန်ကြမ်းတန်ဖိုးတစ်ခုအဖြစ် လွှဲပြောင်းပေးသည်။ ဤအခြေအနေတွင်၊ အချက်အလက်ကို အသုံးပြုထားသည့် computed property တစ်ခုကို သတ်မှတ်ခြင်းသည် အကောင်းဆုံးဖြစ်သည်-

props: ['size'],
computed: {
	normalizedSize: function() {
		return this.size.trim().toLowerCase();
	}
}

မှတ်ချက်

JavaScript ရှိ objects နှင့် arrays များကို reference အားဖြင့် လွှဲပြောင်းပေးကြောင်း သတိပြုပါ၊ ထို့ကြောင့် အချက်အလက်သည် array သို့မဟုတ် object တစ်ခု ဖြစ်ပါက၊ ကလေး component အတွင်းရှိ ထို object သို့မဟုတ် array ၏ ပြောင်းလဲမှုများသည် မိဘ၏ state ကို သက်ရောက်မှုရှိပြီး Vue သည် ဤအကြောင်းကို ကြိုတင်သတိပေးနိုင်မည် မဟုတ်ပါ။ အချက်အလက်များကို မည်သည့်ပြောင်းလဲမှုမဆို ရှောင်ကြဉ်သင့်သည်၊ objects နှင့် arrays များပါဝင်သည်၊ အဘယ်ကြောင့်ဆိုသော် တစ်ဖက်သတ် ဒေတာချိတ်ဆက်မှုကို လျစ်လျူရှုခြင်းသည် မလိုလားအပ်သော ရလဒ်များကို ဖြစ်ပေါ်စေနိုင်သောကြောင့်ဖြစ်သည်။