VUE3-工作笔记04

本节：记录2022.10.8-19日的笔记。

一.总结语法函数      二.总结VUE3组件的使用    三.总结原生组件

一、总结语法函数 

1.filter方法创建给定数组一部分的浅拷贝 (en-US)，其包含通过所提供函数实现的测试的所有元素。

//箭头函数
filter((element, index, array) => { /* … */ } )
 
// 回调函数
filter(callbackFn, thisArg)
 
// 内联回调函数
filter(function(element, index, array) { /* … */ }, thisArg)

es6的写法，filter过滤出计算之后的值

const result = arr.filter(item = >　ｉｔｍｅ％２＝＝＝　０)

//这里是如果arr数组里面的元素，除于2之后，等于0的偶数，就返回出来成为一个数组，判断语句只有一条的时候，就可以省略｛｝ 

El是你当前要处理的元素，一开始要处理的元素el的状态都为true，然后进行一个判断，判断完之后，再进行el要处理元素的状态赋值，改变它的状态，为false的之后，这个下拉状态则为不可操控。判断完之后，再返回它全部的el元素状态赋值到新的变量上面。然后再返回那个一整个变量，就是computed计算属性一直在计算的内容了。

说白了，filter((el)=>{   判断内容})就可以对元素的状态进行一个函数的判断，挑出你要的（过滤出你要），组成一个新的数组，不会影响原来的数组。

Filter((el)=>{})

Filter((el)>{}) filter((el)=>{})  记不住的语法要多敲几遍

2.includes() 方法用于判断字符串是否包含指定的子字符串。

如果找到匹配的字符串则返回 true，否则返回 false。

这里是传的值，是否依旧在数组里面了，传的值，不在数组里面才把传的值，

const handleAddAllowIp = (allowIp: string) => {
  if (allowIp && !data.allowIp.includes(allowIp)) {
    data.allowIp.unshift(allowIp);
//unshift把元素添加在数组开头，添加元素到数组结尾用：数组名.push(添加的内容)
  }
};

unshift把元素添加在数组开头，添加元素到数组结尾用：数组名.push(添加的内容) 

 3.给函数添加节流，防止多次请求，节流：一段时间内，只执行一次某个操作，过了这段时间，还有操作，才执行新的操作。

 防抖：当用户输入完毕的时候，才发送一次请求

 lodash-esEs6的工具插件：

import { debounce } from "lodash-es"; //节流
// 刷新，清空列表再调用 debounce（）防止用户多次点击
const refresh = debounce(() => {
  current.value = 1;
  Object.assign(searchList, new journalSearchClass().searchList);
  getJournal(searchList); //搜索
}, 500);

4.map() 方法可以返回key value的数组map() 可以按顺序给数组里面的元素执行方法，比如变大小写的方法，map() 不会改变原始数组。

使用map()把数组变成，key和value的形式，赋值了一遍。 

5.split() 方法用于把一个字符串分割成字符串数组。

// 计算数组里面的时间
const timestamp = (time: any) => {
  //这里面有内容的情况才执行，防止timestamp传空的内容split剪切undefined会报错
  //分割时间，然后进行时间的转换
if (time) {
    let aryTime = time.split(":").map((item: any) => Number(item));
    return aryTime[0] * 3600 + aryTime[1] * 60 + aryTime[2];
  }
};
//）Number.isFinite(123)判断参数是不是无穷大，我感觉是判断参数是不是数字，是就返回true,不是就返回false  .Finite有限
 
// 判断如果超过一个小时,则可以添加
const handleDateAdd = (autoBackupDate: string) => {
  // some() 方法用于检测数组中的元素是否满足指定条件， Math.abs()转换成数字
  // 如果不是一个小时之内，flg为假，！flg则为真，不是一个小时之内就添加到数组里面
  // 不小于一个小时的时间，才可以放数组里面
  if (autoBackupDate) {
    let flg = autoBackUpModeList.backupTime.some((item: any) => {
      return Math.abs(timestamp(autoBackupDate) - timestamp(item)) < 3600;
    });
    if (!flg) return autoBackUpModeList.backupTime.push(autoBackupDate);
    message.info("时间间隔需超过一小时!");
  }
};

 6.toLowerCase() 方法用于把字符串转换为小写。 stringObject.toLowerCase()

pop() 方法移除数组的最后一个元素，并返回该元素。

7.computed和methods、watch最大的区别在于只有在当前的属性发生变化之后才会被触发。所以computed可以很大程度上提高优化的程度。

变化频率高，比如样式、搜索更适合用computed

computed中每一个方法都必须有return，因为computed中包含的每一个方法最后一定会返回一个属性，也就是某一个值（对象、number、String等），methods中的方法不是必须要返回一个值。

computed中的函数，只执行值有改变的函数。

直接使用计算好的变量

 判断有没有点击的内容，有就为treu,disable就是可用和不可用