Vue 3의 SSR 친화적 고유 HTML ID

다음 시나리오에 직면한 다른 개발자는 몇 명입니까?

HTMLid 속성을 사용하여 요소를 함께 연결해야 하는 Vue 구성 요소가 있습니다.

<template>
  <div>
    <label for="inputId">Label</label>
    <input id="inputId" type="text">
  </div>
</template>

그러나 결과적으로 페이지에 해당 구성 요소의 여러 인스턴스가 있어야 합니다. id 충돌로 페이지가 깨지는 것을 방지하려면 input 요소에 대한 고유 ID가 필요합니다.

불행하게도 Vue는 이를 수행하기 위해 키 오프할 수 있는 구성 요소에 대한 인스턴스 ID를 제공하지 않습니다.

다른 개발자들이 흔히 볼 수 있는 것은 다음과 같은 것입니다.

<template>
  <div>
    <label :for="inputId">Label</label>
    <input :id="inputId" type="text">
  </div>
</template>

<script>
let id = 0
export default {
  data() {
    return {
      inputId: null
    }
  },
  created() {
    id++
    this.inputId = id
  }
}
</script>

이것은 서버 측 렌더링이 그림에 들어갈 때까지 대부분 작동합니다. 별도의 스레드 처리로 인해 무엇을 하든 id는 서버와 클라이언트에서 동기화되지 않습니다.

정말 안타까운 일이지만 해결 방법이 있습니다.

바로 이 문제에 대해 vue-uid을 작성했습니다.

요소의 속성id에 자동으로 할당되는 고유 식별자를 생성하는 작은 지시문입니다.

다음은 사용 예입니다.

<script setup lang="ts">
import { ref } from 'vue'
const input = ref<null | HTMLElement>(null)
</script>

<template>
  <div>
    <label :for="input?.id">Input label</label>
    <input v-uid ref="input" type="text">
  </div>
</template>

이것의 가장 좋은 부분은 처음에 고유 ID를 생성하는 방법을 알아내기 위해 추가 코드를 작성하거나 추가 종속성을 가져올 필요가 없다는 것입니다. 두 번째는 SSR 친화적입니다! 요소에 v-uid 명령을 내리면 믿을 수 있는 고유한 ID로 레이스를 시작합니다.

vue-uid의 작동 방식에 대해 더 자세히 알고 싶으면 Custom Directives 설명서를 읽어보십시오.

도움이 되었기를 바랍니다.

감사.