位置: IT常识 - 正文
vue中使用唯一标识uuid——uuid.v1()-时间戳、uuid.v4()-随机数(vue指定)
编辑：rootadmin推荐整理分享vue中使用唯一标识uuid——uuid.v1()-时间戳、uuid.v4()-随机数(vue指定)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue生成唯一id,vue方法只允许执行一次,vue指定,vue怎么定义一个对象,vue怎么定义一个对象,vue方法只允许执行一次,vue生成唯一id,创建vue实例,表示唯一根标签,内容如对您有帮助，希望把文章链接给更多的朋友！
npm地址：https://www.npmjs.com/package/uuid#api
uuid在线生成器：http://uuid.bchrt.com/
uuid指通用唯一识别码。
UUID 是 通用唯一识别码（Universally Unique Identifier）的缩写，是一种软件建构的标准，亦为开放软件基金会组织在分布式计算环境领域的一部分。其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。
UUID 是由一组32位数的16进制数字所构成，是故 UUID 理论上的总数为1632=2128，约等于3.4 x 10123。也就是说若每纳秒产生1百万个 UUID，要花100亿年才会将所有 UUID 用完
格式：
UUID 的十六个八位字节被表示为 32个十六进制数字，以连字号分隔的五组来显示，形式为 8-4-4-4-12，总共有 36个字符（即三十二个英数字母和四个连字号）。例如：
123e4567-e89b-12d3-a456-426655440000xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx数字 M 的四位表示 UUID 版本，当前规范有5个版本，M可选值为1, 2, 3, 4, 5 ；数字 N 的一至四个最高有效位表示 UUID 变体( variant )，有固定的两位10xx因此只可能取值8, 9, a, b；UUID版本通过 M 表示，当前规范有5个版本，可选值为1, 2, 3, 4, 5。这5个版本使用不同算法，利用不同的信息来产生 UUID，各版本有各自优势，适用于不同情景。具体使用的信息
2、使用1、安装：
npm install uuidnpm install uuid --savecnpm i -S vue-uuid2、生成一个 UUID ：
import { v4 as uuidv4 } from 'uuid';uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'使用 CommonJS 语法：
const { v4: uuidv4 } = require('uuid');uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'const uuid = require('uuid') //1、引包console.log(uuid.v1()) //2、调用 98fc11a0-dde0-11e9-ade5-25202b3a2fbavue中使用全局引用
1、main.js中引入
import UUID from "vue-uuid";Vue.use(UUID);2、使用
console.log("this.$uuid.v1():", this.$uuid.v1());// this.$uuid.v1()：b1ef4cf0-ae0d-11eb-bed8-596efe8bfb0b局部引用import { uuid } from 'vue-uuid';使用：
uuid.v1()完整
import { v4 as uuidv4 } from ‘uuid’const uuid = uuidv4() this.sessionId = uuid.v4()console.log(this.sessionId)node中使用uuid# 下载cnpm i -S uuid使用
const uuid = require('uuid')console.log("uuid.v4()", uuid.v4())3、api参数uuid.NILnil UUID字符串（全零）新进 [email protected]uuid.parse()将UUID字符串转换为字节数组新进 [email protected]uuid.stringify()将字节数组转换为UUID字符串新进 [email protected]uuid.v1()创建版本1（时间戳）UUIDuuid.v3()创建版本3（带MD5的命名空间）UUIDuuid.v4()创建版本4（随机）UUIDuuid.v5()创建版本5（带SHA-1的命名空间）UUIDuuid.validate()测试字符串以查看它是否为有效的UUID新进 [email protected]uuid.version()检测UUID的RFC版本新进 [email protected]4、应用实例实例1全局使用
package.json
"uuid": "^8.3.1",main.js
import { v4 as uuidv4 } from 'uuid';// 全局方法挂载Vue.prototype.uuidv4 = uuidv4使用
click(){ var temp_event = this.uuidv4(); console.log('temp_event',temp_event); eventBus.$on(temp_event,res=>{ this.getList(); eventBus.$off(temp_event); });}实例2页面刷新即生成一个新的 UUID ：
uuid.v4() //直接加在页面的任意位置打开页面/标签，即生成一个 UUID ，页面刷新 UUID 不会变。
打开页面，如果没有UUID则生成一个存入 sessionStorage ，如果有则直接读取sessionStorage中保存的UUID。
let uuid = sessionStorage.getItem('uuid');if (!uuid) { sessionStorage.setItem('uuid',uuidv4());}UUID长期保存，清缓存后自动生成：
这样我们可以将uuid存入localStorage中，可以长期保存：
let uuid = localStorage.getItem('uuid');if (!uuid) { localStorage.setItem('uuid',uuidv4());}增加登录验证，未登陆状态再生成 UUID：
if (getToken()){//判断是否有 token sessionStorage.removeItem('uuid'); //如果有，清除 sessionStorage 中的 uuid} else {//未登录状态生成 uuid let uuid = sessionStorage.getItem('uuid'); if (!uuid) { sessionStorage.setItem('uuid',uuidv4()); }}当然，也可以根据时间、设备信息、MD5和加盐（Salt）等方式生成更加精确的 UUID，大家可以根据自己的需求灵活运用。
上一篇：vue3 父子组件传参详解(vue3父子组件传递数组通信)
下一篇：【JavaScript】手撕前端面试题：对象参数浅拷贝 | 简易深拷贝 | 完整深拷贝(javascript手机版)
