Vue.js

Appearance

On this page

빌트인 특수 속성 ​

key ​

특수 속성 key는 Vue의 가상 DOM 알고리즘이 이전 목록과 새 노드 목록을 비교할 때 vnode를 식별하는 힌트로 주로 사용됩니다.

  • 요구되는 값: number | string | symbol

  • 세부 사항:

    키가 없으면 Vue는 엘리먼트 이동을 최소화하고 동일한 유형의 엘리먼트를 가능한 한 제자리에서 패치/재사용하는 알고리즘을 사용합니다. 키를 사용하면 키의 순서 변경에 따라 엘리먼트를 재정렬하고 더 이상 존재하지 않는 키가 있는 엘리먼트는 항상 제거/파기됩니다.

    동일한 공통 부모의 자식들은 고유 키가 있어야 합니다. 키가 중복되면 렌더링 에러가 발생합니다.

    v-for에서 가장 일반적으로 사용 됩니다:

    template
    <ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

    또는 엘리먼트/컴포넌트를 재사용하는 대신 강제로 교체하는 데 사용할 수도 있습니다. 다음과 같은 경우에 유용할 수 있습니다:

    • 컴포넌트의 생명 주기 훅을 올바르게 트리거함.
    • 트랜지션 트리거

    예제:

    template
    <transition>
  <span :key="text">{{ text }}</span>
</transition>

    text가 변경되면 <span>이 패치 대신 항상 교체되므로 트랜지션이 트리거됩니다.

  • 참고: 가이드 - 리스트 렌더링: key를 통한 상태유지

ref ​

템플릿 참조를 의미합니다.

  • 요구되는 값: string | Function

  • 세부 사항:

    ref is used to register a reference to an element or a child component.

    In Options API, the reference will be registered under the component's this.$refs object:

    ref는 엘리먼트 또는 자식 컴포넌트를 참조하기 위해 사용됩니다.

    옵션 API에서 참조는 컴포넌트의 this.$refs 객체 내에 등록됩니다.

    template
    <!-- 저장됨: this.$refs.p -->
<p ref="p">안녕!</p>

    컴포지션 API에서 참조는 이름이 일치하는 ref에 저장됩니다.

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

const p = ref()
</script>

<template>
  <p ref="p">안녕!</p>
</template>

    일반 DOM 엘리먼트에서 사용되는 경우, 참조는 해당 엘리먼트가 됩니다. 자식 컴포넌트에 사용되는 경우, 참조는 자식 컴포넌트 인스턴스가 됩니다.

    ref는 함수를 사용하여 참조 저장을 완전히 제어할 수 있습니다:

    template
    <ChildComponent :ref="(el) => child = el" />

    참조 등록 타이밍에 대한 중요한 참고 사항: 참조는 렌더 함수의 결과로 생성되므로, 접근하기 전에 컴포넌트가 마운트될 때까지 기다려야 합니다.

    this.$refs도 반응형이 아니므로 데이터 바인딩을 위한 템플릿에서 사용하면 안됩니다.

  • 참고:

is ​

동적 컴포넌트 바인딩에 사용합니다.

GitHub에서 이 페이지 편집