1.搜索添加交互
接口1: 根据名称获取商品列表
接口2：根据名称获取规格
接口3：根据名称获取厂家
使用Promise.allSettled代替Promise.all
2.循环引用组件
使用slot代替组件引用
3.利用vue-virtual-scroller降低内存占用
使用只展示可视区数据
4.input失焦事件与其他元素的点击事件先后顺序
@click 改为 @mousedown，并阻止默认事件，因为input失焦事件是在mousedown事件默认触发的
5.多选组件、计算组件、可拖动的按钮。筛选组件不理想，应该把value和options分开来
6.子组件直接更改父组件
子组件，computed中：
importMenu: {
get () {
return this.importMenuCell
},
set (val) {
this.$emit('update:importMenuCell', val)
}
}
父组件中，sync修饰
:importMenuCell.sync="importMenu"
7.vue中的修饰符
.native
.sync
8.数据过大，比如checkLIst可以使用computed代替watch,前者有缓存可以减少开销
9.大量计算比如筛选、费用（toFixed(2)避免精度问题）在前端
10.区别filter与forEach
updateSuppliers () {
let oldArr = this[`${this.activeTab}Menu`].conditionValue.suppliers.split(',')
// 旧方案
this.sellectAddSellers.forEach(item => {
oldArr.length && oldArr.forEach(itemchild => {
if (item !== itemchild) {
oldArr.push(item)
}
})
})
this[`${this.activeTab}Menu`].conditionValue.suppliers = oldArr.join(',')
// 新方案
this[`${this.activeTab}Menu`].conditionValue.suppliers = [...new Set(oldArr.concat(this.sellectAddSellers))].join(',')
}
}
11.模块化
12.善用slot
比如“我上传的”组件引用，组件互相循环引用会报错，比如horizalInfo引用switchModal,而switchModal也引用horizalInfo
13.全局数据管理vuex
14.特殊组件比如代表商品项的组件，因使用的地方较多，最好有个标记来源的prop，这样可以方便处理不同组件的逻辑及展示需求
15.不想增加dom层级，可使用template代替普通标签
16.UI组件的局限性，比如提供远程联想搜索的input，不具备执行focus事件的能力，没有此API
17.数组塌陷
删掉数组某一项后，数组长度变化导致下一个并非原数组的下一个而是下下一个
解决方案：A.从后向前，B.执行i--
18.使用iconfont代替图标
19.使用事件代理（3000数据左右到4千多崩溃）
20.CSDN放置静态资源
21.关于首屏渲染：
-
考虑CSSDOM构建过程会阻止页面呈现，因为他是逐步呈现页面的，所以尽量避免写层级很深的样式
-
媒体查询不会阻塞页面呈现，因此可以把媒体查询样式单独拎出来做文件引入（eg.<link ref="d.css" media="..."）
-
<script>标签文件用 async= "async"或者defer="defer"
区别：
A.async: 当我们在 script 标记添加 async 属性以后，浏览器遇到这个 script 标记时会继续解析 DOM，同时脚本也不会被 CSSOM 阻止，即不会阻止 CRP。
B.defer: 与 async 的区别在于，脚本需要等到文档解析后（ DOMContentLoaded 事件前）执行，而 async 允许脚本在文档解析时位于后台运行（两者下载的 过程不会阻塞 DOM，但执行会）。
C.当我们的脚本不会修改 DOM 或 CSSOM 时，推荐使用 async 。
核心词 关键渲染路径 (Critical Rendering Path)：关键渲染路径是浏览器将 HTML CSS JavaScript 转换为在屏幕上呈现的像素内容所经历的一系列步骤。
步骤：
-
分析并用 关键资源数 关键字节数 关键路径长度 来描述我们的 CRP 。
-
最小化关键资源数: 消除它们（内联）、推迟它们的下载（defer）或者使它们异步解析（async）等等 。
-
优化关键字节数（缩小、压缩）来减少下载时间 。
-
优化加载剩余关键资源的顺序: 让关键资源（CSS）尽早下载以减少 CRP 长度 。