shallowRef로 큰 외부 데이터의 깊은 추적을 피합니다.
shallowRef는 .value 교체만 추적하고 중첩 객체를 깊게 반응형으로 만들지 않습니다. 불변 데이터나 외부 라이브러리 객체에 적합합니다.
중첩 값을 바꾼 뒤 화면을 갱신하려면 새 최상위 값을 할당합니다.
먼저 성능을 측정하고 일반 ref로 충분한 데이터에 조기 최적화하지 않습니다.
shallowRef 내부 배열을 push만 하고 갱신을 기대하지 마세요.
로컬 프로젝트에서 확인해보세요새 배열 교체로 항목을 추가하세요.
<script setup>
import { shallowRef } from "vue";
const records = shallowRef(
Array.from({ length: 2000 }, (_, id) => ({ id, title: "강좌 " + id })),
);
function add() {
records.value = [...records.value, { id: records.value.length, title: "새 강좌" }];
}
</script>
<template>
<main>
<button @click="add">추가</button>
<p>{{ records.length }}개</p>
<ul>
<li v-for="item in records.slice(0, 5)" :key="item.id">{{ item.title }}</li>
</ul>
</main>
</template>