Vue3 ref() 로 선언된 변수에 데이터 할당하기

Vue3 에서 변수 선언은 ref() 로 한다.

여기서 ref() 는 Vue3 의 reactive 시스템중 하나로, 데이터를 할당하기 위해서는 value 를 통해 값을 할당하거나 변경한다.

 

이미 값이 주어진 변수를 ref() 로 설정된 변수에 대입하는 방법

• ref('') 로 변수 초기화
• .value 로 값 할당
  • ref()로 선언된 변수를 갱신할 때는 .value를 통해 직접 값을 할당한다.
• 템플릿에서 데이터를 확인하려면 {{ dataVal }} 또는 {{ dataVal.value }}로 렌더링할 수 있다.

<script setup>
import { ref } from 'vue';

// 변수 초기화
const dataVal = ref('');

// 외부에서 주어진 데이터
const dataLst = '1234567';

// dataLst 데이터를 dataVal에 할당
dataVal.value = dataLst;
</script>

<template>
  <div>
    <!-- 데이터를 출력하는 부분 -->
    <pre>{{ dataVal }}</pre>
    <pre>{{ dataVal.value }}</pre>
  </div>
</template>