22年10月工作笔记整理（前端）

一、Vue3学习

ref与reactive的区别：
1.ref支持所有的类型，而reactive只支持引用类型Array、Object、Map、Set
2.ref取值、赋值都需要加.value，reactive是不需要.value的
3.reactive proxy不能直接赋值，否则会破坏响应式对象

二、框架配置

在webpack插件里，TerserPlugin里的参数配置exclude:/verdor/；代表第三方的依赖不影响，如不想影响第三方依赖的打印函数。遇到了一个第三方的依赖报错，是因为去除了第三方依赖的consloe，导致出现了undefined错误。

三、项目学习知识

1.css悬浮显示全称，如要使用原生悬浮效果，可以使用title属性。
2.随机数打乱算法

const alphabet = ["A","B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
const numbers = [1,2,3,4,5,6,7,8,9,0];

let uid = '';

//If you want to change UID length you can add here. This example has 6 symbol
let a = alphabet[Math.floor(Math.random() * alphabet.length)];
let b = numbers[Math.floor(Math.random() * numbers.length)];
let c = alphabet[Math.floor(Math.random() * alphabet.length)];
let d = alphabet[Math.floor(Math.random() * alphabet.length)];
let f= numbers[Math.floor(Math.random() * numbers.length)];
let g = alphabet[Math.floor(Math.random() * alphabet.length)];

uid = a+b+c+d+f+g;

document.getElementById("orderId").innerHTML = "Order number: " + uid;
console.log("Order number: " + uid)

3.！非空断言符号，忽略null和undefined类型；?.运算符是如果遇到null或者undefined就可以立即停止某些表达式的运行。