Реактивность дар фреймворки Vue

Ҳар гуна тағйири додаҳо аз data ба тағйири фаврӣи намоиши ин додаҳо дар саҳифа меоранд. Ин рафторӣ Vue реактивность номида мешавад.

Биёед дар амал санҷем. Бигзор мо хосияти зеринро дошта бошем:

data() {
	return {
		text: 'xxx',
	}
}

Қимати ин хосиятро хориҷ мекунем:

<template>
	{{ text }}
</template>

Тугмае созем, ки пахш кардан ба он хосияти моро тағйир медиҳад:

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

Ҳоло усулеро нависем, ки бо клик кардан ба тугма фарохонӣ шавад ва хосиятро тағйир диҳад:

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

Агар ҳама коди якҷоя карда шавад ва тугмаро пахш кунед - матн дар экран реактивно ба дигаре иваз мешавад.

Хосияти text дода шудааст. Мундариҷаи ин хосиятро дар як абзаси ҳар кадоме хориҷ кунед.

Тугма дода шудааст. Чунон кунед, ки бо клик кардан ба ин тугма қимати хосияти text ба таври реактивӣ ба дигаре иваз шавад.

Ду тугма дода шудааст. Чунон кунед, ки бо клик кардан ба тугмаи аввал қимати хосияти text ба таври реактивӣ ба як қимат иваз шавад, ва бо клик ба дуюмӣ - ба дигар қимат.