Александр Белькевич </> Frontend вдохновляет: “Во Vue 3.5 появилась такая штука, как useId. Появилась фича давно, но…”

Во 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 в копилку ваших знаний, если еще не использовали.