vue实现uuid
使用 uuid 库生成 UUID
在 Vue 项目中，可以使用 uuid 库来生成 UUID。安装依赖：
npm install uuid在 Vue 组件中使用：
import { v4 as uuidv4 } from 'uuid';
export default {
data() {
return {
uniqueId: uuidv4()
};
}
};使用 crypto.randomUUID()
现代浏览器支持 crypto.randomUUID() 方法生成 UUID，无需安装额外依赖：
export default {
data() {
return {
uniqueId: crypto.randomUUID()
};
}
};自定义 UUID 生成函数
如果不想依赖第三方库，可以使用以下函数生成 UUID：
function generateUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
const r = Math.random() * 16 | 0;
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
export default {
data() {
return {
uniqueId: generateUUID()
};
}
};在 Vuex 或 Pinia 中使用 UUID
在状态管理库中生成 UUID：
// Pinia 示例
import { defineStore } from 'pinia';
import { v4 as uuidv4 } from 'uuid';
export const useStore = defineStore('main', {
state: () => ({
items: [{ id: uuidv4(), name: 'Item 1' }]
})
});作为组件 prop 传递 UUID
父组件生成 UUID 并传递给子组件：
<template>
<ChildComponent :id="uniqueId" />
</template>
<script>
import { v4 as uuidv4 } from 'uuid';
export default {
data() {
return {
uniqueId: uuidv4()
};
}
};
</script>注意事项
浏览器兼容性需要考虑，特别是 crypto.randomUUID() 方法。对于旧版浏览器，建议使用 uuid 库或自定义实现。
UUID 版本选择很重要，v4 是随机生成的，v1 基于时间戳和 MAC 地址。大多数情况下 v4 足够使用。
在服务器端渲染 (SSR) 场景下，需要确保 UUID 生成在客户端和服务器端保持一致，或者只在客户端生成。
