Vue3: 리액티브 시스템

ref()의 동작

ref() 함수의 동작을 배우려면 리액티브시스템을 이해할 필요가 있다. 리액티브란 변수의 값의 변화에 연동해서 표시되는 내용이 자동적으로 변화하는 것을 말한다. 리액티브시스템은 리액티브를 실현하는 방식으로, 뷰의 근간을 이루고 있다.

<script setup lang="ts">
import { ref } from "vue";

// 현재 시간을 취득
const now = new Date();
// 현재 시각의 문자열을 취득
const nowStr = now.toLocaleTimeString();
// 현재 시각 문자열을 템플릿 변수로써 준비함
let timeStr = nowStr;
// 마찬가지로 현재 시각 문자열을 템플릿 변수로써 ref()로 준비함
const timeStrRef = ref(nowStr);
// 새로운 시각으로 변경하는 함수
function changeTime(): void {
  // 현재 시간을 취득
  const newTime = new Date();
  // 현재 시각의 문자열을 취득
  const newTimeStr = newTime.toLocaleTimeString();
  // 현재 시각의 문자열을 템플릿 변수 timeStr에 저장
  timeStr = newTimeStr;
  // 현재 시각의 문자열을 템플릿 변수 timeStrRef에 저장
  timeStrRef.value = newTimeStr;
}
// changeTime 함수를 1초마다 실행
setInterval(changeTime, 1000);
</script>

<template>
  <p>현재 시각: {{ timeStr }}</p>
  <p>현재 시각(ref): {{ timeStrRef }}</p>
</template>

<style scoped></style>

리액티브 변수의 준비, 값 바꾸는 방법

const 변수명 = ref(값);
변수명.value = 새로운값;