React’s useId, now Vue3.5 finally has it!

preface

React was added in earlier versionsuseIdUsed to generate a unique ID. In Vue 3.5 version, there is finally the long-awaiteduseId. This article will help you clarifyuseIdWhat are the application scenarios and how is it implemented.

The role of useId

New additions to Vue 3.5useIdWe can generate unique IDs within Vue applications, and we can use themuseIdGenerate a unique ID for each item in the list data.

And in the server-side rendering (SSR) scene, both the server-side and client-side executeuseIdThe generated ID is the same. We can use this feature touseIdResolve warnings caused by inconsistent IDs generated by the server-side and client-side in SSR applications.

Finally, we talked aboutuseIdThe implementation is also very simple, and the generated ID is divided into three parts:

• The first part is the prefix:app.config.idPrefixIf there is no configuration, then it is just a stringv。
• Part 2 String:-。
• The value of the third part is a self increasing number that exists on the Vue instanceidsAttributes, on all Vue instancesidsAll attributes point to the same array. That's why it's saiduseIdCan be in Vue in app Generate a unique ID instead of Within Vue components Generate a unique ID.