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

又一年过去了，回顾一下自己的技术水平，由于工作内容都是做业务需求，在业务需求方面，没有很大的问题，只是偶尔会遇到棘手的需求需要想很久，也能做出来；一直都知道自己对项目搭建配置和基础架构思维还是有欠缺的，目前也不可能把这么重要的活给我一个一年半工作经验的前端，所以也没有机会去接触，明年尽可能找机会去学一下吧。

一、复习基础与学习

1.git命令删除分支
查看远程分支：git branch -r
删除远程分支：git push origin --delete 分支名
查看本地分支：git branch
删除本地分支：git branch -D 分支名
2.前端版本缓存问题解决
3.vue2和vue3的区别
4.vue.config.js配置详解
5.全局使用自定义组件，不需要在页面进行单个引用
首先在plugins文件下定义一个js文件

//index.js
import Vue from 'vue'
import Page from '@/components/Page.vue' // 页面tab
const components = {
  Page
}
Object.keys(components).forEach(key => {
  Vue.component(key, components[key])
})

再在main.js文件引入
import ‘./plugins/index.js’
6.vite搭建vue2项目踩坑学习
7.screenfull实现全屏效果
8.vue-pdf对pdf进行预览，支持翻页
9.VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码

10.学习记录composition api
10.1如何选择ref和reactive
基本数据类型(string,number,boolean等)或者单值对象({count:1}这样只有一个属性值的对象)使用ref
引用类型的值 (Object,Array)使用reactive,获取数据的时候不要添加.value
10.2ref和toRef的区别
ref是对传入数据的拷贝，改变不影响原数据；toRef是对传入数据的引用，改变影响原数据
ref的值改变会更新视图；toRef的值改变不会更新视图
10.3context.attrs和props的区别
props要在当前组件props属性里声明才可以取值，attrs不用先声明
props不包含事件，attrs包含
props没有声明的属性，会跑到attrs里，声明了的就在props里，不在attrs里
当我们在html标签里只写属性不赋值的时候，props支持string以外的类型，attrs只用string类型

11.1this指向问题
this出现在全局函数中,永远指向window
this出现在严格模式中，为undefined
当某个函数为对象的一个属性时，在这个函数内部this指向这个对象
this出现在构造函数中，指向构造函数新创建的对象
当一个元素被绑定事件处理函数时，this指向被点击的这个元素
this出现在箭头函数中时，this和父级作用域的this指向相同
11.2.修改this指向
11.2.1使用call、apply、bind修改this指向
具体：call 、bind 、apply 这三个函数的第一个参数都是 this 的指向对象
第二个参数：call 的参数是直接放进去的，apply 的所有参数都必须放在一个数组里面传进去 。bind 除了返回是函数以外，它的参数和 call 一样。
11.2.2使用new关键字改变this指向

12.css3的transition
四个属性：①要监听的变化属性，一般用all，②时间③速度效果曲线，分别有ease 逐渐变慢、linear 匀速、ease-in 缓慢开始(加速)、ease-out 缓慢结束(减速)、ease-in-out 缓慢开始，缓慢结束(先加速后减速)、cubic-bezier 贝塞尔曲线④延迟多久才开始动画效果
例子：transition: all 0.3s ease 0.1s ;
13.scss的混合使用
定义：
@mixin名称{样式}
使用：
当前页面引路径
@include名称
14.判断对象是否为空
object.keys(obj).length===0 true为空

二、需求技巧

1.给el-input加上防抖函数

监听:
watch: {
    'searchInput': {
      deep: true,
      handler(newVal, oldVal) {
        this.debounce(this.getUpList, 500);
      }
    }
  },
方法部分：
//防抖函数
 debounce(fn, wait) {
 let timer = setTimeout(fn, wait);
      if (timer !== null) {
        clearTimeout(this.timer)
      }
     
    },
//请求的方法
    getUpList() {},

2.tree和list的相互转换，递归方法

 // treeData转list
    function handleOrgTreeToList(treeData) {
        let res = []
        treeData.forEach(({ id, label, orgInfo, childList }) => {
          res.push({
            id,
            label,
            orgInfo
          })
          if (childList && childList.length > 0) {
            res = res.concat(handleOrgTreeToList(childList))
          }
        })
        return res
      }
      return handleOrgTreeToList(this.orgOptions)
    }
 
//list转tree
 handleTreeData(raw) {
      const { orgInfo, childList } = raw
      raw.label = orgInfo.name
      raw.id = orgInfo.id
      if (childList && childList.length > 0) {
        childList.forEach(child => {
          this.handleTreeData(child)
        })
      }
    }

3.el-tree过滤方法带子节点

<template>
    <div>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree"> </el-tree>
    </div>
</template>

<script>
export default {
    data() {
        return {
            filterText: '',
            data: [{id: 1, label: '一级 1', children: [{id: 4, label: '二级 1-1', children: [{id: 9, label: '三级 1-1-1'}, {id: 10, label: '三级 1-1-2'}] }] }, {id: 2, label: '一级 2', children: [{id: 5, label: '二级 2-1'}, {id: 6, label: '二级 2-2'}] }, {id: 3, label: '一级 3', children: [{id: 7, label: '二级 3-1'}, {id: 8, label: '二级 3-2'}] }], defaultProps: {children: 'children', label: 'label'}
        }
    }
    methods: {
//关键代码
        filterNode(value, data, node) {
            if (!value) return true
            let parentNode = node.parent, labels = [node.label], level = 1
            while (level < node.level) {
                labels = [...labels, parentNode.label]
                parentNode = parentNode.parent
                level++
            }
            return labels.some(label => label.indexOf(value) !== -1)
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
}
</script>

4.vue3+ts定义一个对象数组

interface list {
  //表示可以增加其他任意属性
  [prop: string]: unknown
}
interface interList {
  [index: number]: list
}
const tableData = ref<interList>([])

5.遇到npm装依赖时冲突报错，在后面加命令：–legacy-peer-deps