Vue даги маълумотларнинг бир йўналишли окими

Барча кириш параметрлари бола хусусияти ва ота хусусияти ўртасида бир томонлама богловни ҳосил қилади: ота хусусияти янгиланганда, у бола компонентга ўтади, лекин аксинча эмас. Бу бола компонентларнинг ота ҳолатини тасодифий ўзгартиришининг олдини олади, бу эса сизнинг илловангиз маълумотлар окимини түшunishни қийинлаштириши мумкин.

Бундан ташқари, ҳар қачон ота компоненти янгиланганда, бола компонентининг барча кириш параметрлари энги сўнгиги қийматлар билан янгиланади. Бу шунни англатадики, сиз бола компоненти ичида кириш параметрини ўзгартиришга ҳаракат қилмашингиз керак. Агар сиз буни қилсангиз, Vue консольда огоҳлантиришни кўрсатади.

Одатда, кириш параметрини ўзгартириш вақти келиб қоладиган икки ҳолат учрайди. Келиб, уларни кўриб чиқайлик.

Биринчи ҳолат

Кириш параметри бошланғич қийматни ўтказиш учун ишлатилади; бола компонент уни кейинчалик локал маълумот хусусияти сифатида ишлатмоқчи. Бу ҳолатда энг яхшиси, маълумотларда локал хусуятни аниқлаш, у кириш параметрининг қийматини бошланғич сифатида ишлатади:

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

Иккинчи ҳолат

Кириш параметри қайта ишланмаган қиймат сифатида ўтказилади, уни айлантириш керак. Бу ҳолатда энг яхшиси, кириш параметридан фойдаланган ҳисобланган хусуятни аниқлаш:

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

Эътироз

Диққат қилинг, JavaScript даги объектлар ва массивлар ҳаволa бўйича ўтказилади, шу сабабдан агар кириш параметри массив ёки объект бўлса, у ҳолда бола компоненти ичидаги ўзгаришлар отанинг ҳолатига таъсир қилади ва Vue бу ҳақда огоҳлантиролмайди. Кириш параметрларининг, шу жумладан объектлар ва массивларнинг ҳар қандай мутациясидан сақланиш керак, чунки маълумотларнинг бир томонлама богланишини эътиборсиз қолдириш хоҳиш қилинмаган натижаларга олиб келиши мумкин.