반응형 값 변경에 따른 부수 효과를 의존성 방식에 맞게 실행합니다.
watch는 지정한 source의 이전값과 새값을 받고, watchEffect는 동기 실행 중 읽은 의존성을 자동 추적합니다. 파생값 계산에는 computed를 우선합니다.
검색 요청 같은 비동기 작업은 cleanup으로 오래된 작업을 취소합니다.
deep watch는 큰 객체 전체를 순회할 수 있어 필요한 속성 getter를 source로 지정합니다.
watch 안에서 감시 중인 값을 무조건 다시 변경하면 반복 실행이 생깁니다.
로컬 프로젝트에서 확인해보세요검색어가 비었을 때 기록하지 않도록 조건을 추가하세요.
<script setup>
import { ref, watch, watchEffect } from "vue";
const query = ref(""),
history = ref([]),
summary = ref("현재 검색어: 빈 값");
watch(query, (value, oldValue) => {
history.value.push((oldValue || "빈 값") + " → " + (value || "빈 값"));
});
watchEffect(() => {
summary.value = "현재 검색어: " + (query.value || "빈 값");
});
</script>
<template>
<main>
<label>검색 <input v-model="query" /></label>
<p>{{ summary }}</p>
<ul>
<li v-for="(item, index) in history" :key="index">{{ item }}</li>
</ul>
</main>
</template>