xinglongjizi

/*
场景：scroll事件中要去设置一个css变量，来控制某些元素的定位位置，

xxx.addEventListener('scroll', () => {
  const scrollY = xxx.scrollY;
  document.documentElement.style.setProperty('--scroll-y', `${scrollY}px`);
});

可见，一股脑就把变量设置到document上了
scroll事件很容易造成性能问题

xinglongjizi

<!--
场景：
el-popover中的选项点击会触发modal弹窗，
需求是，用户在弹窗点击操作，而不会使el-popover关闭，让它一直处于打开状态，直到当弹窗关闭后，
用户的接下来的操作，就正常触发el-popover关闭
-->

<!--
方案1：
el-popover的触发方式是manual

xinglongjizi

.grid-bg {
    border-radius: 2px;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background-image: linear-gradient(to right, #e5e5e5 1px, transparent 1px), linear-gradient(#e5e5e5 1px, transparent 1px);
    background-size: calc(8.333333%) var(--cell-height, 84px);
}

.grid-bg {
  margin: 0 auto;

xinglongjizi

/*
按需带入组件渲染
视图
<div v-for="item in list" :key="item.id">
	<component :is="item.cardInstance" />
</div>
*/

const list = ref([])

xinglongjizi

/*
使用 Map 数据结构保存要渲染的卡片实例
{
	'@/components/reportCenter/cards/MyComponent.vue': component的实例对象，import得到的东西
}
在视图中使用
<component :is="allCardComponentsMap.get(item.componentPath)" />
*/

import { defineAsyncComponent } from 'vue'

xinglongjizi

/*
有些场景下，我们使用el-checkbox的时候，不会通过使用v-model的方式使用它
而是通过绑定 :checked="item.isChecked" 并配合 @change 来使用
这时，如果 item 数据对象只变化 isChecked 属性，el-checkbox的 checked 属性不会动态变化
可能是因为vue复用元素的问题
解决方案 给el-checkbox加一个动态的:key
相当于强行重新渲染了el-checkbox
这样 checked属性就会随着item.isChecked变化而变化了
*/

xinglongjizi

<!--  
有时我们想把一个动态值 item.xxx 设置成class值
item.xxx 的值可能是 0 1 2 3
根据不同的值设置的class来设置样式
vue中没有把一个动态值设置成class值得语法，或者说即使是有也很麻烦，我们只是想设置样式而已
除非使用函数，但是函数很重，我们只是想设置样式而已
因此，可以使用绑定动态 data-xxx 属性，再使用属性选择器设置样式
-->

<li v-for="item in list" :key="item.id" class="list-item" :class="">abc<li>

xinglongjizi

/*
比如结合element ui组件，我们在单文件组件中自己写的元素或者通过slot注入进element组件中的元素，定义它的样式是都可以写在scope样式中，因为这些
元素vue在处理时，都会加上 data-v-xxx 属性
然后是，引入组件的第一层元素也加上了 data-v-371664d9 属性，因此第一层元素的样式也可以写在scope中
*/

xinglongjizi

/*
背景：
apmweb3的工程搭建得很早，vue的版本是3.2.31，element-plus的版本是2.3.4，element-plus的版本太低了
现在要写一个新页面，需要实现树形的虚拟表格，就需要用到element-plus的el-table-v2组件，
由于工程的element-plus的版本太低，el-table-v2组件也没迭代多少个版本，bug或者说功能不完全。
因此就需要升级element-plus的版本，element-plus的GitHub上的源码的package.json中有个配置是
"peerDependencies": {
  "vue": "^3.2.0"
},
说明vue的版本不用升级，

xinglongjizi

/*
背景el-table在渲染超过1000个td的场景下会出现性能问题：
1. 初始渲染时间加长
2. 更改某个数据，vue内部进行大量的js计算，阻塞渲染主线程，造成浏览器几秒卡死，不可交互
这是由于vue的虚拟dom渲染原理，即使一棵虚拟dom树的某个部分从未改变，还是会在每次重渲染时创建新的 vnode，带来了大量不必要的内存压力和性能问题
解决方案，只能上技巧：
让el-table中的表格内容尽量简单，只做简单的静态数据渲染，交互都脱离el-table
比如表格中的数据编辑：点击某个td，触发在td编辑数据
技巧：以编辑数据，单独谈一个编辑modal为启发，可以做一个蒙层，在这个蒙层中做编辑的ui，根据点击的td的位置信息，将编辑ui定位到td位置重合
为了不因为改了一个数据，又触发el-table重新渲染，直接使用dom操作更改数据