vue实现uuid

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

使用第三方库uuid

安装uuid库后，可以在Vue组件中直接调用：

npm install uuid

在Vue组件中使用：

import { v4 as uuidv4 } from 'uuid';
export default {
  methods: {
    generateUUID() {
      return uuidv4(); // 生成标准的UUID v4
    }
  }
}

使用浏览器内置的crypto.randomUUID()

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

export default {
  methods: {
    generateUUID() {
      return crypto.randomUUID(); // 浏览器原生API
    }
  }
}

手动实现UUID v4

如果需要轻量级实现，可以使用以下代码生成符合UUID v4规范的字符串：

export default {
  methods: {
    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插件全局使用

将UUID生成方法注册为全局属性：

// main.js
import { v4 as uuidv4 } from 'uuid';

app.config.globalProperties.$uuid = () => uuidv4();

// 组件内调用
this.$uuid();

注意事项

• 浏览器兼容性：crypto.randomUUID()需要Chrome 92+或Firefox 95+等现代浏览器
• 服务端渲染：在SSR场景下需确保crypto模块或uuid库能被Node识别
• 唯一性：手动实现的版本可能无法保证严格的唯一性，生产环境推荐使用标准库