Vue3中生成UUID的兩種方法

更新時間：2026年01月15日 10:29:35 作者：BillKu

這篇文章主要介紹了在Vue3中生成UUID的兩種主要方式：使用uuid庫和手動生成函數(shù),uuid庫標準可靠,支持多種版本,但需要安裝依賴,手動生成簡單但唯一性稍弱,且需自行測試和維護,推薦使用uuid庫,因為它在大多數(shù)場景下都是最可靠的選擇,需要的朋友可以參考下

方法	優(yōu)點	缺點	適用場景
使用`uuid`庫	標準可靠、支持多種版本、廣泛應用	需安裝依賴	大多數(shù)需要高唯一性和符合標準的場景
手動生成	無額外依賴、代碼透明	唯一性稍弱、需自行測試和維護	對項目體積敏感或簡單臨時的場景
使用`Crypto API`	瀏覽器原生支持、基于密碼學安全的隨機數(shù)	瀏覽器兼容性	對安全性要求高且需控制依賴的場景

使用uuid庫（推薦）

這是最常用且可靠的方法。

安裝依賴
在你的項目根目錄下，通過npm或yarn安裝uuid庫：

npm install uuid

在組件中生成UUID
在你的Vue 3組件中，你可以這樣使用：

<template>
  <div>
    <p>生成的UUID: {{ uuid }}</p>
    <button @click="generateUuid">生成新的UUID</button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'; // 按需導入v4版本[citation:5]
import { ref } from 'vue';

export default {
  setup() {
    const uuid = ref(uuidv4()); // 使用ref使其是響應式的

    const generateUuid = () => {
      uuid.value = uuidv4();
    };

    return {
      uuid,
      generateUuid
    };
  }
};
</script>

如果你使用<script setup>語法，代碼會更簡潔：

<template>
  <div>
    <p>生成的UUID: {{ uuid }}</p>
    <button @click="generateUuid">生成新的UUID</button>
  </div>
</template>

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

const uuid = ref(uuidv4());
const generateUuid = () => {
  uuid.value = uuidv4();
};
</script>

手動生成或使用原生API

如果不想安裝額外庫，也可以手動實現(xiàn)。

手動生成UUID
以下是一個常用的生成UUID v4格式的函數(shù)：

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);
  });
}

在Vue 3的setup()中，你可以這樣引入和使用它：

import { ref } from 'vue';
// ... 假設上述函數(shù)已定義或從工具文件導入
const uuid = ref(generateUUID());

使用現(xiàn)代瀏覽器的Crypto API
瀏覽器原生的Crypto接口提供了更安全的隨機數(shù)，可以用來生成UUID。

function generateCryptoUUID() {
  // 注意：這是一個簡化示例，生成的格式可能不完全符合標準v4 UUID
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

注意：此方法依賴于瀏覽器環(huán)境，且示例代碼生成的UUID格式可能與標準有細微差別。在Node.js等非瀏覽器環(huán)境下不可用。

應用場景與選擇建議

掌握了方法后，如何在實戰(zhàn)中選擇呢？

選擇UUID版本：uuid庫支持多個版本，最常用的是v4（隨機數(shù)），適用于絕大多數(shù)場景。如果你需要基于時間或命名空間生成可預測的UUID，可以考慮v1或v5。

常見應用場景：

為列表項提供唯一的key。
為動態(tài)組件或表單元素綁定唯一ID。
在API請求中作為唯一追蹤標識（可放在HTTP請求頭中）。
持久化存儲：如果你希望用戶在一次會話或多次訪問中保持同一個UUID，可以結合sessionStorage或localStorage進行存儲和讀取。

以上就是Vue3中生成UUID的兩種方法的詳細內(nèi)容，更多關于Vue3生成UUID方法的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: