2022.01遇到的知识点总结

1.property和attribute的区别是什么？

property是js属性，修改的是js对象；
attribute是html属性，用getAttribute和setAttribute对html属性进行查询和修改；
get和set attribute时会触发dom查询或重绘、重排，频繁操作会影响页面性能；

2.<img>可以做打点统计

将url设置为后端接口地址，每次进入页面就会加载图片，请求url，后端可以以此进行统计。

这种方案的优点：

跨域，<img>能躲避同源策略；
几乎没有浏览器兼容问题；

缺点：

某些网站会屏蔽图片；

3.opacity和visibility

opacity: 0; 看不见摸得着
visibility: hidden; 看不见摸不着
所以要实现元素隐藏而且有动画效果时，需要两者配合使用。

.test {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    &.show {
            visibility: visible;
            opacity: 1;
    }
}

4.float的破坏性

float会使父标签出现坍塌现象，原因是float会使元素脱离文档流，根本原因是float的设计初衷是解决文字环绕图片的问题。
所有float元素的父容器都应该clearfix:

.clearfix:after{
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /*兼容低版本ie*/
}

5.element-plus的分页组件el-pagination默认是英文

文案如何显示为中文？
方法1：适合全部引入

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
    locale: zhCn
})

方法2：适合按需引入

import { ElPagniation } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import { use as localeUse } from 'element-plus/lib/locale'

localeUse(lang)
app.use(ElPagniation)

方法3：适合按需自动引入

<template>
  <el-config-provider :locale="zhCn">
    <router-view></router-view>
  </el-config-provider>
</template>

import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

6.proxy相对于defineProperty的优点

Object.defineProperty必须预先劫持属性，被劫持的属性才能被监听到。后添加的属性需要手动再次劫持。
proxy代理了整个对象，不用预先劫持，也不用在新增属性的时候手动劫持，在属性变化的时候通过get/set得到通知。