在 Vue3 中获取 UUID（通用唯一识别码）

在 Vue3 中获取 UUID（通用唯一识别码）可以通过以下几种方式实现：

---

方法 1：使用第三方库 uuid

1. 安装库：

   npm install uuid
   

2. 在组件中使用：

   import { v4 as uuidv4 } from 'uuid';
   
   export default {
     setup() {
       const uuid = uuidv4(); // 生成 UUID v4
       return { uuid };
     }
   };
   

3. 在模板中使用：

   <template>
     <div>UUID: {{ uuid }}</div>
   </template>
   

---

方法 2：使用浏览器原生 API crypto.randomUUID()

现代浏览器支持 crypto.randomUUID()，无需安装依赖：

export default {
  setup() {
    const uuid = crypto.randomUUID(); // 直接生成 UUID
    return { uuid };
  }
};

⚠️ 注意：兼容性问题（不支持 IE 和旧版浏览器）。

---

方法 3：手动实现 UUID 生成器（简化版）

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0;
    const v = c === 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

export default {
  setup() {
    const uuid = generateUUID();
    return { uuid };
  }
};

---

推荐场景

1. 生产环境：优先使用 uuid 库（可靠性高）。
2. 现代浏览器项目：直接用 crypto.randomUUID()。
3. 轻量需求：手动实现简化版。

---

完整组件示例

<template>
  <div>
    <p>Generated UUID: {{ uuid }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { v4 as uuidv4 } from 'uuid';

export default {
  setup() {
    const uuid = ref(uuidv4()); // 使用 uuid 库
    // const uuid = ref(crypto.randomUUID()); // 使用浏览器 API
    return { uuid };
  }
};
</script>

---

注意事项

• 唯一性：手动实现的 UUID 可能不够严谨，建议用于非关键场景。
• SSR 环境：在服务端渲染（如 Nuxt.js）中避免使用浏览器 API（如 crypto），需通过条件判断处理。