Аднанапрамаваны паток даных у Vue

Усе ўваходныя параметры ўтвараюць аднабаковую прывязку паміж даччынай уласцівасцю і бацькоўскай: калі бацькоўская ўласцівасць абнаўляецца - яна будзе перадавацца даччынай, але не наадварот. Гэта прадухіляе выпадковае змяненне даччынымі кампанентамі бацькоўскага станy, што можа затрымаць разуменне патоку даных вашага дадатка.

Акрамя таго, кожны раз, калі абнаўляецца бацькоўскі кампанент, усе ўваходныя параметры даччынага кампанента будуць абноўлены актуальнымі значэннямі. Гэта азначае, што вы не павінны спрабаваць змяняць ўваходны параметр унутры даччынага кампанента. Калі вы гэта зробіце, Vue адлюструе папярэджанне ў кансолі.

Звычайна сустракаюцца два выпадкі, калі ўзнікае спокуса змяняць ўваходны параметр. Давайце іх разгледзім.

Выпадак першы

Уваходны параметр выкарыстоўваецца для перадачы пачатковага значэння; даччыны кампанент хоча выкарыстоўваць яго як лакальную ўласцівасць даных у далейшым. У гэтым выпадку лепш за ўсё вызначыць лакальную ўласцівасць у даных, якая выкарыстоўвае значэнне ўваходнага параметра ў якасці пачатковага:

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

Выпадак другі

Уваходны параметр перадаецца як неапрацаванае значэнне, якое неабходна пераўтварыць. У гэтым выпадку лепш за ўсё вызначыць вылічаную ўласцівасць з выкарыстаннем уваходнага параметра:

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

Заўвага

Звярніце ўвагу, што аб'екты і масівы ў JavaScript перадаюцца па спасылцы, таму калі ўваходны параметр масіў або аб'ект, то змяненні ўнутры даччынага кампанента гэтага аб'екта або масіва будзе ўплываць на стан бацькі і Vue не ў стане папярэдзіць пра гэта. Следуе пазбягаць любых мутацый уваходных параметраў, у тым ліку аб'ектаў і масіваў, так як ігнараванне аднабаковага звязвання даных можа прывесці да нежаданых вынікаў.