Во Vue 3.5 появилась такая штука, как useId. Появилась фича давно, но мало кто знает о ней. Она есть и в React, насколько я помню.
useId() - это composable, который генерирует уникальный и стабильный ID для компонента.
Уверен, многие сталкивались с тем, чтобы дать уникальные ID компоненту. Особенно полезно, когда нужно компонент перерисовать по какой-либо причине.
Раньше делали что-то типа
const id = `input-${Math.random()}Это давало определенные проблемы. К примеру, в Nuxt можно было напороться на ошибку
hydration mismatch.
useId():
- Генерирует детерминированный id
- Он будет одинаковый как сервере, так и на клиенте
- Уникальный в рамках приложения
<script setup>
import { useId } from 'vue'
const id = useId()
</script>
<template>
<label :for="id">Email</label>
<input :id="id" />
</template>
Принцип работы простыми словами:
- ведёт счётчик компонентов при рендере
- строит id на основе позиции в дереве
v-0
v-1
v-2-1
Это даёт порядок и отсутствие рандома.
+1 в копилку ваших знаний, если еще не использовали.
