当前位置：首页 > VUE

vue如何实现uuid

2026-03-29 06:51:00VUE

生成 UUID 的方法

在 Vue 中生成 UUID 可以通过多种方式实现，以下是几种常见的方法：

使用第三方库 uuid

安装 uuid 库：

npm install uuid

在 Vue 组件中使用：

vue如何实现uuid

import { v4 as uuidv4 } from 'uuid';

export default {
  data() {
    return {
      uniqueId: uuidv4()
    };
  }
};

使用 crypto.randomUUID()（现代浏览器支持）

如果目标环境支持现代浏览器 API，可以直接使用 crypto.randomUUID()：

vue如何实现uuid

export default {
  data() {
    return {
      uniqueId: crypto.randomUUID()
    };
  }
};

自定义 UUID 生成函数

以下是一个简单的 UUID v4 生成函数：

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

注意事项

如果使用 uuid 库，建议明确指定版本（如 uuidv4），避免因版本更新导致兼容性问题。
crypto.randomUUID() 需要浏览器支持，部分旧浏览器或非 HTTPS 环境可能不可用。
自定义函数适用于简单场景，但可能无法完全符合 UUID 规范。

使用场景示例

在 Vue 组件中为列表项分配唯一 ID：

export default {
  methods: {
    addItem() {
      this.items.push({
        id: crypto.randomUUID(),
        name: 'New Item'
      });
    }
  }
};