ref 와 reactive 는 vue3에서 추가된 Composition api로, 이를 이용하여 반응형 data를 사용할 수 있다.
*특징
- ref : 어떤 타입이든 사용가능. 주로 원시타입 변수 사용.
- reactive : Object, Array등 객체타입만 사용가능.
*접근 방식
- ref :
script에서 사용 시 : .value 를 붙여 사용
// 스크립트에서 ref 사용하기
import {ref} from "vue"; // vue에서 ref 객체 import
const 변수명 = ref(초기값); // 초기값은 option.
//example
<script>
const refParam = ref();
refParam.value = "ref 테스트"; // 값 변경
console.log(refParam.value); // 값 출력
</script>
vue tag에서 사용시 : {{변수명}} 로 사용
// tag 에서 ref사용
<template>
{{refParam}}
</template>
<script>
import {ref} from "vue";
const refParam = ref("test1234");
</script>
tag 속성에서 사용시 : 속성명 앞에 콜론(:)추가 및 변수명 그대로를 사용
// tag 에서 ref사용
<template>
<div>
<Button :label=refParam />
</div>
</template>
<script>
import {ref} from "vue";
const refParam = ref("test1234");
</script>
- reactive
// reactive 사용하기
<template>
<!-- {{객체명.변수명}} 과 같이 일반 object 처럼 사용한다 -->
{{reactiveParam.param1}}
{{reactiveParam.param2}}
</template>
<script>
import {reactive} from "vue"; // vue에서 reactive import
const reactiveParam = reactive({
param1: 1,
param2: "문자열"
})
</script>