开发过程中的代码问题经验总结

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 转换为在屏幕上呈现的像素内容所经历的一系列步骤。

      步骤：

1. 分析并用 关键资源数 关键字节数 关键路径长度 来描述我们的 CRP 。
2. 最小化关键资源数: 消除它们（内联）、推迟它们的下载（defer）或者使它们异步解析（async）等等 。
3. 优化关键字节数（缩小、压缩）来减少下载时间 。
4. 优化加载剩余关键资源的顺序: 让关键资源（CSS）尽早下载以减少 CRP 长度 。