템플릿 참조는 상수 내에서 어떻게 작동하나요?

Question

vue의 템플릿 참조 문제에 대해

저는 "refs"에 대한 vue 문서를 보고 있었고 v-for 내부의 참조를 설명하는 섹션에서 다음 예를 제공합니다.

으아악

목적을 이해할 수 있습니다

으아악

근데 왜 ref가

에도 적용되는지 이해가 안 돼요. 으아악

샌드박스에서는 기능을 손상시키지 않고 "목록 상수"에서 참조를 제거할 수 있는데, 이 상수 내부의 실제 응용 프로그램은 무엇입니까?

으아악

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

Answer 1

ref를 사용하여 list를 반응형 변수로 변환하세요. 새 항목이 추가되거나 변경될 때마다 이를 모니터링하는 다른 기능이나 템플릿 부분이 업데이트됩니다. ref 가 없는 예에서는 새 항목을 목록에 추가해도 템플릿에서 자동으로 렌더링되지 않습니다.

당신이 혼란스러워하는 것을 이해합니다. 아마도 당신이 vue2 세계 출신인 것 같습니다. 반응성에 관한 vue3 문서를 읽는 것이 좋습니다.