前端开发问题记录帖

（1）数组响应式 

第一种
let arr = reactive([])
 function change(){
     console.log("change...");
     let newArr = [1,2,3]
     arr.push(...newArr)
  }

第二种
let arr = reactive({list:[]})
arr.list = newArr

第三种
let arr = ref([])
let newArr = [1,2,3]
arr.value = newArr

（2）隔行变色用法

::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead
:deep(.ant-table-tbody .ant-table-row:nth-child(2n)) {background: #F2F4F7;}
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : '')"
（3）自定义速度
ransition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);cubic-bezier和linear|ease|ease-in|ease-out|ease-in-out
（4）ant  select placeholder  不展示。value值绑定空值不展示，只能一开始绑定undefined和null
（5）取最大值
var ary=[100,23,78,90,80];
var sum=0;
for(var i=0;i<ary.length;i++)
{

if(ary[i]>sum){
sum=ary[i];
}
}

Math.max(1,2,3)
Math.max.apply(Math,[1,2,3,4])
（6）判断是否为空对象
 (JSON.stringify(data) == "{}");
var data = {};
var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0);//true
≥ ≤
JSON.parse(JSON.stringify(res[i].split(",")).replace('[','{').replace(']',']'))
（7）自适应属性
width（height）:fill-available表示撑满可用空间；默认div的宽度10%
width（height）:fit-content表示将元素宽度收缩为内容宽度
width（height）:min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度
width（height）:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行
<style>
.outer{
  width:-webkit-min-content;
}
</style>
<div class="outer">
  <div style="height:10px;width:100px;background:lightgreen"></div>
  <div style="background-color: pink;">小火柴的蓝色理想</div>
</div>
（8）给常见的引入属性添加proxy双向绑定
import { toRef } from 'vue'
const visible = toRef(ContextManager, 'visible');
（9）正则表达式替换
'77447474474'.replace(new RegExp('7','g'),'b')
（10） 获取上个页面的路径
  useRouter().beforeEach ((to, from, next)=>{
        console.log(233,to)
        console.log(from)
        console.log(next)
        next();
    })
（11）watch监听
 watch(
      () =>  'name',
      (val, oldval)=> {
        console.log('count',count, prevCount)
      }
    )
watch(() => [ 'name','age'],( [ name1,age1],  [ oldname,oldage])=> {
         console.log(name1,age1,oldname,oldage)
      }
    )
（12）echarts引入

 import * as ech from 'echarts';
首先设定宽高，vue3 用 ref 绑定操作dom
<div ref="echarts1"class="echarcss"></div>
let echartdom = ref<any>(null);
if (!ech.getInstanceByDom(echartdom.value)) {
        mychart = ech.init(echartdom.value);
      }
（13）str.padStart(targetLength,string) 自动补全

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth 
   /^[a-z|A-Z|\u4e00-\u9fa5]+$/g  只能输入中英文
（14）
function deepClone (obj) {  
    if(typeof obj !== "object" && typeof obj !== 'function') {
        return obj;        //原始类型直接返回
    }
    var o = isArray(obj) ? [] : {}; 
    for(i in obj) {  
        if(obj.hasOwnProperty(i)){ 
            o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i]; 
        } 
    } 
    return o;
}
（15）
MutationObserver 监听dom,测受聘时间
（16）
减少重排重绘, 方法很多：
1. 使用 class 操作样式，而不是频繁操作 style
2. 避免使用 table 布局
3. 批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React
4. Debounce window resize 事件
5. 对 dom 属性的读写要分离 
6. will-change: transform 做优化
（17）
减少重排重绘，相当于少了渲染进程的主线程和非主线程的很多计算和操作，能够加快web的展示。
1 触发repaint reflow的操作尽量放在一起，比如改变dom高度和设置margin分开写，可能会出发两次重排
2 通过虚拟dom层计算出操作总得差异，一起提交给浏览器。之前还用过createdocumentfragment来汇总append的dom,来减少触发重排重绘次数。

（18）ant3表格，行合并

     customCell: ((record,rowIndex) => {
            return {
              style: { display: rowIndex % 2 === 0 ? '' : 'none' },
              rowSpan:rowIndex % 2 === 0 ? 2 : 0,
            };
          })

Git 常用命令

Nodejs安装及环境配置 - 简书

介绍 | Vue CLI

Vue3

Element Plus

九个超级实用的 ES6 特性-前端开发博客

vxe-table-v4

页面优化，谈谈重绘(repaint)和回流(reflow) - 听风是风 - 博客园

Object.defineProperty() - JavaScript | MDN

vue页面首次加载缓慢原因及解决方案 - 橘子味儿的猫 - 博客园