ref와 reactive 간단정리 (작성중)

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>