浅谈Vue 性能优化之深挖数组(7)

this.cardData = [{
  startIndex: 0,
  secName: '章节名称',
  secId: '章节id',
  tInfo: [
  {
    id: 1,
    klass: 'item_false'
  }, 
  {
    id: 2,
    klass: 'item_false_active'
  }]
}]

如此一来，就不会出现 O(n³) 时间复杂度的问题了。

善用缓存

我发现 getItemClass 里面自己写的很不好，其实应该用个变量去缓存 quesions，这样就不会造成对 questions 多次求值，进而多次走到源码的 dependArray 当中去。

const questions = this.questions

// good      // bad
// questions[0]  this.questions[0] 
// questions[1]  this.questions[1]
// questions[2]  this.questions[2]
......

// 前者只会对 this.questions 一次求值，后者会三次求值

后感

从这次教训，自己也学到了也很多。

遇到问题的时候，要利用现有工具去分析问题的原因，比如 Chrome 自带的 Performance。

对于自己所用的技术，要追根究底，庆幸自己之前深入研究过 Vue 的源码，这样才能游刃有余地去解决问题，否则现在估计还一头雾水，如果有想深入理解 Vue 的小伙伴，可以参考Vue.js 技术揭秘，看过 GitHub 上面很多源码分析，这个应该是写的最全最好的，我自己也对该源码分析提过 PR。

实现一个需求很容易，但是要把性能做到最佳，成本可能急剧增加。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。