个人搜集有关vue和JavaScript的一些方法(以下方法都为我个人理解和需要，欢迎各位大佬补充，后续可能会更新)

// 在打包时更好地进行代码的摇树优化（tree-shaking），以减少最终产物的体积,解决__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ 警告在vue.config.js文件下编写
chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  }

// 查看本机ip
ipconfig/all

// css设置背景色透明
1. rgba：.element {  background-color: rgba(255, 0, 0, 0.8);}；
2. opacity：.element {   background-color: #042585; /* 设置背景色 */   opacity: 0.8; /* 设置透明度为 0% */}；

// 使用css控制字体间隙和首行缩进
.element {text-indent: 2em;} // 代表缩进两字符
.element {   letter-spacing: 2px; /* 设置字体间的间距为 2 像素 */}

//  取消vue响应式数据 // 此方法仅限v2，v3定义数据时不要ref或reactive，直接定义即可
Object.freeze(数组或对象)；// 它是原生中的api，他主要是冻结传递进去的参数，一旦冻结后里面的值就不会再发生任何变化，不管是删除或者修改或添加，都只保存没有冻结之前的状态；
Object.isFrozen(冻结之后的参数或没冻结的参数); // 它是用来判断所传参数是否被冻结；
应用场景在于项目中不需要进行增删改的数据和只做展示的数据可以使用；

// 关闭当前标签页
window.close();

// git大小写引发的问题
使用git自带的命令：git config core.ignorecase false; 

// instanceof运算符
instanceof 是 JavaScript 中用于检查一个对象是否属于某个特定类的运算符。
    其中，object 是要检查的对象，constructor 是要比较的构造函数。如果 object 是 constructor 的实例，instanceof 运算符返回 true，否则返回 false。
    instanceof 运算符的工作原理是利用原型链。它会遍历 object 的原型链，查找与 constructor.prototype 相等的原型。如果存在，则返回 true，表示 object 是 constructor 的实例；如果不存在，则返回 false。
    需要注意的是，如果 constructor 不是一个构造函数（比如普通函数或者原始数据类型），instanceof 运算符会抛出一个错误。此外，instanceof 运算符可以检查对象是否是 constructor 构造函数（或其继承类）的实例，但无法检查对象是否是某个类的实例。

// 使用$(类名或id名) 或 document.getElementById() 来获取内容
使用$().val() // 获取input中的值    
    .text() // 获取span中的值

document.getElementById().value; // 获取input值
          .getElementsByTagName('span')[0].innerHTML； // 获取标签中的内容

// css伪类和伪元素 其中伪类是使用单冒号“:”,伪元素使用双冒号“::”
1. 伪类：
    // E 代表 类名 或 id名 或 标签名；N 代表具体值；
    1.1 nth-child选择器：
        E:nth-child(n); // 表示在元素E中同级第N个元素；
        E:nth-last-child(n); // 表示在元素E中同级倒数第N个元素；
        E:first-child // 表示在元素E中同级第一个元素；
        E:last-child // 表示在元素E中同级最后一个元素；
        E:only-child // 表示在元素E中同级唯一元素；

    1.2 nth-type 选择器
        E:nth-of-type(n); // 表示在元素E中同级同类型的第N个元素；
        E:nth-last-of-type(n); // 表示在元素E中同级同类型的倒数第N个元素；
        E:frist-of-type; // 表示在元素E中同级同类型的第一个元素；
        E:last-of-type; // 表示在元素E中同级同类型的最后一个元素；
        E:only-of-type; // 表示在元素E中同级同类型的唯一元素；

    1.3 其它 
        :root // 选择根元素html；
        :empty // 选择空元素；

    1.4 否定伪类选择器
        E:not(val); // 选中不是val选择器中的元素E，其中val代表nth-type 或其它选择器值；
        示例：li:not(:last-of-type) {border-bottom: 1px solid #000;} // 此效果为多个li标签，除了最后一个标签没有底部边框其它都有；

    1.5 动态伪类选择器
        E:link; // 跳转未被访问过的链接；
        E:visited; // 跳转被访问过的链接；
        E:active; // 鼠标长按；
        E:hover; // 鼠标划过；
        E:focus; // 点击匹配的E元素，并获取焦点；

2. 伪元素
    E::before; // 在元素E最前面添加内容；
    E::after; // 在元素E的最后面添加内容；
    E::first-letter; // 给元素E第一个字符添加样式；
    E::first-line; // 给元素E第一行添加样式；
    E::selection; // 对元素E中的内容，在用户选择时添加样式；

// 当字符串长度不够时自动向前补零
let str = '1234'.padStart(8,'0');
console.log(str); // "00001234"

// echarts清除图表实例方法
.dispose() 是用于销毁图表实例的方法。调用该方法会释放图表实例占用的资源，并将其从页面中移除，以便释放内存并清理页面。通常，当你不再需要某个图表实例时，可以调用该方法来进行清理。

// html5新增标签 
 1. <header>头部</header>
 2. <nav>导航</nav>
 3. <article>  文章  页面中有一块独立的内容区域  放标签   </article>
 4. <footer>底部</footer>
 5. <aside>侧边栏</aside>
 6. <section>内容</section>

// 要一起使用才能根据宽度强制字体换行
white-space: pre-wrap; // 可以让浏览器保留文本中的空格和换行。这样做可以保证文本的格式不变，且按单词换行的功能依旧可以正常使用。
word-wrap: break-word; // 它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

// 为什么需要虚拟DOM？
1. 框架设计方面：在页面数据发生变化的时候，无法精准的确定到元素上。可能就造成某一个数据发生变化，全部的DOM元素进行重新渲染。比如vue、react框架，它们在数据更新的时候只能确定到某个组件，没法确定到数据本身，这个时候就需要对虚拟DOM进行渲染更新，然后通过diff算法对虚拟DOM和真实的DOM进行比较，来渲染其中不同的地方；

2. 解耦运行环境：真实DOM只存在于浏览器中，一旦到了其它页面无法找到真实DOM元素，只有一些原生组件，这时候就需要一个折中的方法，就是通过虚拟DOM，由于虚拟DOM就是Js对象，而js对象对每个界面都是支持的，所以通过这个js对象来充当一个描述界面的作用；

// vue访问不存在的页面时跳转到404页面
v2 ：{
    path: '*',
    name: '/404',
    component: 路径地址；
  }
v3 ： {
    path: '/:pathMatch(.*)',
    //访问主页的时候 重定向到404页面
    redirect: '/404',
  },
  {
    path: '/404',
    name: '/404',
    component: 路径地址
  }

// 获取到id的祖级标签
let issue = document.getElementById(`${id}`).parentNode.parentNode.parentNode.parentNode;
let issue = $('#id').parent().parent();

// 获取到路径上完整信息
$route.fullPath

// 防抖节流
const flag = ref<boolean>(false);
const enterS = () =>{ // 节流
  if(flag.value) {    
    console.log('777');
    return;
  }else {
    flag.value = true;
    setTimeout(()=>{
      console.log('666');
      flag.value = false;
    },1000);
  };
};
节流的使用场景在于用户频繁点击按钮或其它系列的点击事件时使用；
节流是通过布尔值搭配定时器来实现执行第一次点击的，在用户第一次点击后再特定的时间中再次点击也只执行flag为false的；

let timeout = ref<any>(null);
const enterAdds = (fn:any,time:any) =>{ // 防抖
    // let timeout;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      enterAdd();
    }, time);
};
防抖使用场景在于用户搜索或者频繁触发input事件时使用；
防抖是通过定时器和销毁定时器来完成，在用户输入的特定时间里不会触发，超过这个时间才会触发事件，只执行超过设置时间范围；

// 版本不匹配无法下载依赖解决方法
使用 --force 或 --legacy-peer-deps ：你可以尝试使用npm安装时的 --force 或 --legacy-peer-deps 标志，以强制安装尽管存在冲突的依赖。然而，这可能会导致一个潜在的破碎的依赖解析。
示例： npm i --legacy-peer-deps;

// 添加样式
issue.style.setProperty('color', 'red', 'important');

// 但文本超出显示省略号
white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis;

// 弹性盒子方式
flex-direction:  // 控制垂直方向
row // 默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列
row-reverse // 主轴为水平方向（水平布局），起点在右端，从右向左排列
column // 主轴为垂直方向（垂直布局），起点在上沿，从上往下排列
column-reverse // 主轴为垂直方向（垂直布局），起点在下沿，从下往上排列

// px 转换 rem 或 rem 转 px 方法
Alt + z

// 内存泄漏
内存泄漏一般是由能触达但不想要的数据造成的，由于垃圾回收机制只能回收一些，不能触达的数据，它没办法像自己一样清楚的知道哪些是不要，哪些是要的，这样就会产生一些能触达但不像要的数据；
// 闭包引发的内存泄漏
1. 持有了不再需要的函数应用，会导致函数关联的词法环境无法销毁，从而导致内存泄漏；
2. 当多个函数共享词法环境时，会导致词法环境膨胀初夏出现无法触达也无法回收的内存空间，从而导致内存泄漏；
// 垃圾回收机制
1. 引用计数；
2. 标记清除；

// 页面刷新
location.reload();

// 设置图片和文字居中显示
vertical-align:middle;

// 设置字体竖向展示
writing-mode: tb-rl;

// 保留小数位数
toFixed(2)；

// 路由重定向
 {
    path: '/',
    redirect: '/homePage'
  },

// vue项目打包后在vue.config文件中添加，即可自动跳转首页
publicPath: './',

// 设置打包后的项目目录名称
outputDir: "项目名称", 

// 写在mounted中dataV自适应布局的方法
window.addEventListener("resize", () => {
         this.$nextTick(() => {
             this.scrollBoardKey1++;
             this.scrollBoardKey2++;
         });
 });
// 和上方一致，不过是写在beforeMount中
document.removeEventListener("fullscreenchange", () => {
       return;
 });
window.removeEventListener("resize", () => {
       return;
});

占据一个中文字符：&emsp;
占据半个中文字符：&ensp;

// 返回三角余弦的角度
Math.cos() // 如果指定角度为Na或无穷大，则返回NaN；

// 返回圆周率
Math.PI 

// 字符串转小写
tolowerCase();
// 转大写
toUpperCase();

// 循环监测数组方法，只要有一个满足就会返回trur
some();
// 和some()相同只不过是数组全部满足条件后才会返回true
every();

// 数组升序
sort(); // 它会改变原数组
toSorted(); // 它是新增的函数api，不会改变原数组，会新生成一个数组来存储升序后的数据
sort方法只能排10以内的，如果排10外的需要写sort(function(a,b){return a-b})其中a-b升序 b-a降序
// 降序
reverse();// 它会改变原数组
toReversed(); // 它是新增的函数api，不会改变原数组，会新生成一个数组来存储降序后的数据
arr.with(下标，修改的值); // 数组修改方法，不会对原数组产生影响，会返回一个新数组

// 随机抽取5道不重复的题
        while (data.value.length < 5) {
                 let randomIndex = Math.floor(Math.random() * 10);
                 let randomResult = res.data.data.resultList[randomIndex];
                 // 检查是否已经存在相同的元素
                 if (!data.value.includes(randomResult)) {
                        data.value.push(randomResult);
                 };
           };