반응형 상태가 템플릿을 자동으로 갱신하는 흐름을 이해합니다.
Vue는 컴포넌트가 렌더 중 읽은 반응형 의존성을 추적하고 값이 바뀌면 필요한 화면을 다시 계산합니다. 템플릿은 현재 상태를 선언합니다.
화면 계산은 순수하게 유지하고 네트워크나 저장소 변경은 이벤트와 생명주기 경계에서 수행합니다.
DOM을 직접 바꾸면 다음 렌더와 충돌하므로 상태를 변경해 화면이 따라오게 합니다.
일반 변수는 변경해도 Vue가 추적하지 못합니다.
로컬 프로젝트에서 확인해보세요count를 감소시키는 버튼을 추가하고 0 미만을 막으세요.
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<main>
<h1>완료 {{ count }}개</h1>
<button @click="count++">완료 추가</button>
</main>
</template>