一：原因

在vue项目中，我们需要指定唯一值，以前经常用v-for循环的key作为唯一键，这样就会导致重复，也会得到警告提示，

那么，useId就可以解决这个问题,主要作用是生成唯一的ID

二：使用

1：项目使用，这个功能在处理列表渲染、表单元素和无障碍属性时非常有用，因为它可以确保每个元素都有一个唯一的标识符，主要用作表单元素，列表渲染唯一键

import { useId } from 'vue'

const id0 = useId();
console.log(id0); // v-0

<ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}（{{ item.id }}）
    </li>
  </ul>

const items = Array.from({ length: 10}, (v, k) => { 
    return {
        text: `Text ${k}`,
        id: useId()
    }
})

2：SSR渲染使用，服务端会在node环境生成一次，(脱水)，然后返回给客户端，进行渲染，（注水），采用这个可以保证两次渲染实例一致，达到唯一性，如果没有使用useId，而是使用了Math.random()或Date.now()来生成ID，那么服务端和客户端可能会生成不同的ID

<script setup lang="ts">
const id = useId();
</script>

三：原理

1：方式

export function useId(): string {
  const i = getCurrentInstance()
  if (i) {
    return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++
  } else if (__DEV__) {
    warn(
      `useId() is called when there is no active component ` +
        `instance to be associated with.`,
    )
  }
  return ''
}

A：第一部分为前缀，从app.config.idPrefix中取的。如果没有配置，那么就是字符串v。

B：第二部分为写死的字符串-。

C：第三部分为i.ids[0] + i.ids[1]++，其中ids[0] 的值为空字符串。i.ids[1]++这里是先取值，然后再执行++，所以第三部分的值为数字0。再次调用useId时，由于上一次执行过一次++了。此时的数字值为1，并且再次执行++

const app = createApp(App)

app.config.idPrefix = 'vid'

如果不想使用默认的前缀'v'的话，可以通过app.config.idPrefix进行设置

2：流程

A：所有vue实例上面的ids属性都是同一个数组，指向的是顶层组件实例上面的那个ids属性，

B：没有父组件时，也就是最顶层的vue组件实例，就将其ids属性设置为数组['', 0, 0]，

C：当生成子组件的vue实例时，由于父组件上面有ids属性，所以就用父组件上面的了

四：总结

1：提升了可访问性和稳定性

2：可以在Vue应用内生成唯一的ID