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>