Vue3中生成UUID的两种方法

npm install uuid

<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>

<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>

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

import { ref } from 'vue';
// ... 假设上述函数已定义或从工具文件导入
const uuid = ref(generateUUID());

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