Reactivity(반응형)

Reactivity

reactive()

반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있다.

객체타입에만 반응한다.

기본타입(number, string, boolean)을 반응형으로 만들기 위해서 ref 메서드를 사용한다.

예시

	<template>
	<div>
	<button v-on:click="increment">Click {{ state.count }}</button>
	</div>
	</template>
	<script>
	import { reactive } from "vue";
	export default {
	setup() {
	const state = reactive({ count: 0 });
	const increment = () => {
	state.count++;
	};
	return { state, increment };
	},
	};
	</script>
	<style scoped></style>

view raw reactivity.vue hosted with ❤ by GitHub

⬇️⬇️ 실행결과 ⬇️⬇️

 

 

ref

변이가능한 객체를 반환한다.

이 객체에는 value라는 하나의 속성만 포함한다.

value 값은 ref() 메서드에서 매개변수로 받은 값을 갖고 있다.

이 객체는 내부의 value 값에 대한 반응형 참조 역할을 한다.

예시

	<template>
	<div>
	<p>{{ message }}</p>
	<button v-on:click="addMessage">add click</button>
	</div>
	</template>
	<script>
	import { ref } from "vue";
	export default {
	setup() {
	let message = ref("Hello !");
	const addMessage = () => {
	message.value = message.value + "!";
	};
	return { message, addMessage };
	},
	};
	</script>
	<style></style>

view raw ref.vue hosted with ❤ by GitHub

⬇️⬇️ 실행 결과 ⬇️⬇️

템플릿에서 ref에 접근할 때는 .value를 빼고 작성해도 잘 작동한다.

 

 

toRef/toRefs

예시 : 일반적인 구조분해할당

	<template>
	<div>
	<p>year: {{ year }}</p>
	<p>height: {{ height }}</p>
	</div>
	</template>
	<script>
	import { reactive, toRef } from "vue";
	export default {
	setup() {
	const info = reactive({
	name: "Hoon",
	year: "2024",
	gender: "man",
	height: "177",
	});
	const { year, height } = info;
	console.log(year, height);
	return { year, height };
	},
	};
	</script>
	<style></style>

view raw toRef.vue hosted with ❤ by GitHub

⬇️⬇️ 실행 결과 ⬇️⬇️

⬇️⬇️ 콘솔 실행 결과 ⬇️⬇️

콘솔 실행결과를 보면, 일반적인 구조 분해 할당을 이용했을 때, 반응형을 잃어버린 것을 알 수 있다.

이 때, 반응형을 잃지않고 사용하기 위해서 toRef, toRefs를 사용할 수 있다.

하나만 구조분해 할당을 할 때는 toRef를 사용하고,

여러 개를 한번에 구조분해 할당을 할 때는 toRefs를 사용한다.

 

예시 : toRefs()

	<template>
	<div>
	<p>year: {{ year }}</p>
	<p>height: {{ height }}</p>
	</div>
	</template>
	<script>
	import { reactive, toRef, toRefs } from "vue";
	export default {
	setup() {
	const info = reactive({
	name: "Hoon",
	year: "2024",
	gender: "man",
	height: "177",
	});
	const { year, height } = toRefs(info);
	console.log(year, height);
	return { year, height };
	},
	};
	</script>
	<style></style>

view raw toRefs.vue hosted with ❤ by GitHub

⬇️⬇️ 실행 결과 ⬇️⬇️