vue实现uuid

安装 uuid 库

在 Vue 项目中安装 uuid 库，可以通过 npm 或 yarn 安装：

npm install uuid
# 或
yarn add uuid

导入 uuid 方法

在 Vue 组件中导入 uuid 的 v4 方法（生成随机 UUID）：

import { v4 as uuidv4 } from 'uuid';

生成 UUID

在 Vue 的 data、methods 或 computed 中调用 uuidv4() 生成唯一标识符：

data() {
  return {
    uniqueId: uuidv4() // 生成并存储 UUID
  };
}

在模板中使用

直接在 Vue 模板中绑定生成的 UUID：

<template>
  <div>唯一标识符：{{ uniqueId }}</div>
</template>

动态生成 UUID

若需每次调用时生成新的 UUID，可以在方法中返回 uuidv4()：

methods: {
  generateUuid() {
    return uuidv4();
  }
}

使用 UUID 作为组件 key

在循环渲染组件时，可以用 UUID 作为 key，确保唯一性：

<template>
  <div v-for="item in list" :key="generateUuid()">
    {{ item.name }}
  </div>
</template>

替代方案：使用浏览器原生 API

若不想依赖第三方库，可使用浏览器内置的 crypto.randomUUID()（需现代浏览器支持）：

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