记一次关于vue性能问题

当时开发项目的时候，涉及到一个操作列表（不是单纯展示的列表，里面包含很多操作功能）的功能。把列表的每个小item写成一个子组件，当时写子组件没有考虑到数据量的问题。所以在写子组件，并没有做什么优化，而且里面还加了form表单校验，里面还有很多事件处理，样式处理等等复杂的逻辑。

注意：

1. 首先需要从设计上面来说简化功能（弱化这种列表的功能，省去没有必要的功能，比如说表单校验。这样可以在提交的时候，循环数据判断，虽然这种方式也存在弊端）

2. 然后，看下哪些部分可以在稍后渲染，或者直接先不渲染，在需要的时候再渲染。展示必要信息，不需要的信息可以稍后渲染。

3. 数据量很大的时候：

   • 简单的查看，不需要操作。使用滚动事件，注意一个问题：如果完全渲染完成了，需要把事件移除。避免消耗性能

       // 鼠标滚动的时候，可以默认加载
       // 这种方式对于数据量超大的，比如说1000条+，可能会生成超多的标签，如果需要操作的时候，页面会超级卡顿
       // 很多操作都没法进行，但是查看功能还是可以进行的
       const scrollTop = document.documentElement.scrollTop
       let clientHeight = document.documentElement.clientHeight
       const bodyHeight = document.body.scrollHeight // body的总高度
       if ((bodyHeight - scrollTop) <= 2 * clientHeight) {
         this.rulesList = this.rulesList.concat(this.arrRulesList.slice((this.concatIndex - 1) * this.defaultShowNum, this.defaultShowNum * this.concatIndex++))
       }
       window.addEventListener('scroll', this.windowScroll)
       window.removeEventListener('scroll', this.windowScroll)
     

   • 使用定时器，同样渲染完成了，清除定时器。可能一次渲染多个，页面会存在卡顿的效果，可以使用先渲染一部分，后面的部分一次渲染少一些，这样就不会存在卡顿效果，无法操作其他的内容

4. 上面这些方法如果对于数据量很大的话，其实都不好用。但是可以考虑腾讯部落使用的方法，一个页面有4000+条数据，如果只是单单渲染也会很消耗性能。他们使用的处理方式是，页面总共只有40个li元素，上滑下滑，都是相应的使用上面和下面的li元素定位的，并且把内容修改掉。

（如果下次遇到这种列表的问题，需要考虑到）