/template>
可能有的小伙伴有疑问,前面不是讲的useId
每执行一次会给后面的数字+1
。那么服务端执行一次后,再去客户端执行一次,讲道理应该生成的ID不一样吧??
useId
生成的“自增数字部分”是维护在vue实例上面的ids
属性上,服务端渲染时会在Node.js端生成一个vue实例。但是客户端渲染时又会在浏览器中重新生成一个新的vue实例,此时vue实例上的ids
属性也会被重置,所以在服务端和客户端执行useId
生成的值是一样的。
useId是如何实现的
我们来看看useId
的源码,非常简单!!简化后的代码如下:
function useId(): string {
const i = getCurrentInstance()
if (i) {
return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++
}
return ''
}
这个getCurrentInstance
函数我想很多同学都比较熟悉,他的作用是返回当前vue实例。
给useId
打个断点,来看一下当前vue实例i
,如下图:
从上图中可以看到vue实例上的ids
属性是一个数组,数组的第一项是空字符串,第二项是数字0,第三项也是数字0
我们再来看看useId
是如何返回唯一ID的,如下:
return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++
生成的唯一ID由三部分组成:
第一部分为前缀,从app.config.idPrefix
中取的。如果没有配置,那么就是字符串v
。
第三部分为i.ids[0] + i.ids[1]++
,其中ids[0]
的值为空字符串。i.ids[1]++
这里是先取值,然后再执行++
,所以第三部分的值为数字0
。再次调用useId
时,由于上一次执行过一次++
了。此时的数字值为1
,并且再次执行++
。
看到这里有的小伙伴又有疑问了,这里看上去ids
属性是存在vue实例上面的。每个vue组件都有一个vue实例,那么每个组件都有各自维护的ids
属性。那你前面的那个例子中UseIdChild1
子组件和UseIdChild2
子组件中各自生成的id0
的值应该是一样的v-0
吧,为什么一个是v-0
,另外一个是v-2
呢?
答案其实很简单,所有vue实例上面的ids
属性都是同一个数组,指向的是顶层组件实例上面的那个ids
属性。创建vue实例的源码如下图:
从上图中可以看到当没有父组件时,也就是最顶层的vue组件实例,就将其ids
属性设置为数组['', 0, 0]
。
当生成子组件的vue实例时,由于父组件上面有ids
属性,所以就用父组件上面的了。指针都是指向的是最顶层vue实例上面的ids
属性,所以才会说所有的vue组件实例上面的ids
属性都是指向同一个数组。
这也就是为什么UseIdChild1
子组件和UseIdChild2
子组件中各自生成的id0
的值一个是v-0
,另外一个是v-2
。
总结
Vue3.5新增的useId
可以在Vue应用内生成唯一的ID,我们可以使用useId
给列表数据中的每一个item生成一个唯一的id。
并且在服务端渲染(SSR)场景中,服务端和客户端执行useId
生成的是同一个ID。利用这个特点我们可以使用useId
解决一些在 SSR 应用中,服务器端和客户端生成的 ID 不一致导致的警告。
最后我们讲了useId
的实现也很简单,生成的ID分为三部分:
第一部分为前缀:app.config.idPrefix
,如果没有配置,那么就是字符串v
。
第三部分的值为一个自增的数字,存在vue实例上面的ids
属性,所有的vue实例上面的ids
属性都是指向同一个数组。这也就是为什么说useId
可以在Vue应用内
生成唯一的ID,而不是在Vue组件内
生成唯一的ID。