currentIndex = 0 // 用来标记当前选中题目的索引

questions = [{
  secId: 1, // 所属章节的 id
  tid: 1, // 题目 id
  content: '题目内容' // 题目描述
  type: 1, // 题型，1 ~ 3 (单选，多选，判断)
  options: ['选项1', '选项2', '选项3', '选项4',] // 每个选项的描述
  choose: [1, 2, 4], // 多选——记录用户未提交前的选项
  done: true, // 标记当前题目是否已做
  answerIsTrue: undefined // 标记当前题目的正确与否
}]

cardData = [{
  startIndex: 0, // 用来记录循环该分组数据的起始索引，这个值等于前面数据的长度累加。
  secName: '章节名称',
  secId: '章节id',
  tids: [1, 2, 3, 11] // 该章节下面的所有题目的 id
}]

<div class="card-content">
 <div class="block" v-for="item in cardData" :key="item.secName">
  <div class="sub-title">{{item.secName}}</div>
  <div class="group">
   <span
    @click="cardClick(index + item.startIndex)"
    class="item"
    :class="getItemClass(index + item.startIndex)"
    v-for="(subItem, index) in item.secTids"
    :key="subItem">{{index + item.startIndex + 1}}</span>
  </div>
 </div>
</div>

getItemClass (index) {
 const ret = {}
 // 如果是做对的题目,但并不是当前选中
 ret['item_true'] = this.questions[index]......
 // 如果是做对的题目，并且是当前选中
 ret['item_true_active'] = this.questions[index]......
 // 如果是做错的题目,但并不是当前选中
 ret['item_false'] = this.questions[index]......
 // 如果是做错的题目，并且是当前选中
 ret['item_false_active'] = this.questions[index]......
 // 如果是未做的题目，但不是当前选中
 ret['item_undo'] = this.questions[index]......
 // 如果是未做的题目，并且是当前选中
 ret['item_undo_active'] = this.questions[index]......
 return ret
},

// 位于 vue/src/core/instance/lifecycle.js
new Watcher(vm, updateComponent, noop, {
  before () {
   if (vm._isMounted) {
    callHook(vm, 'beforeUpdate')
   }
  }
}, true /* isRenderWatcher */)

updateComponent = () => {
 vm._update(vm._render(), hydrating)
}

// 位于 vue/src/core/instance/render.js
Vue.prototype._render = function (): VNode {
  ......
  
  const { render, _parentVnode } = vm.$options
  try {
   vnode = render.call(vm._renderProxy, vm.$createElement)
  } catch (e) {
   ......
  }
  return vnode
}

function initData (vm: Component) {
 ......
 // observe data
 observe(data, true /* asRootData */)
}

export function observe (value: any, asRootData: "htmlcode">

export class Observer {
 value: any;
 dep: Dep;
 vmCount: number;
 constructor (value: any) {
  this.value = value
  this.dep = new Dep()
  this.vmCount = 0
  def(value, '__ob__', this)
  if (Array.isArray(value)) {
   if (hasProto) {
    protoAugment(value, arrayMethods)
   } else {
    copyAugment(value, arrayMethods, arrayKeys)
   }
   this.observeArray(value)
  } else {
   this.walk(value)
  }
 }
 walk (obj: Object) {
  const keys = Object.keys(obj)
  for (let i = 0; i < keys.length; i++) {
   defineReactive(obj, keys[i])
  }
 }
 observeArray (items: Array<any>) {
  for (let i = 0, l = items.length; i < l; i++) {
   observe(items[i])
  }
 }
}


Observer 的构造函数很简单，就是声明了 dep、value 属性，并且将 value 的 _ ob _ 属性指向当前实例。举个栗子：


// 刚开始的 options 
export default {
  data : {
    msg: '消息',
    arr: [1],
    item: {
      text: '文本'
    }
  }
}
// 实例化 vm 的时候，变成了以下
data: {
  msg: '消息',
  arr: [1, __ob__: {
      value: ...,
      dep: new Dep(),
      vmCount: ...
    }],
  item: {
    text: '文本',
    __ob__: {
      value: ...,
      dep: new Dep(),
      vmCount: ...
    }
  },
  __ob__: {
    value: ...,
    dep: new Dep(),
    vmCount: ...
  }
}


也就是每个对象或者数组被 observe 之后，多了一个 _ ob _ 属性，它是 Observer 的实例。那么这么做的意义何在呢，稍后分析。
继续分析 Observer 构造函数的下面部分：


// 如果是数组，先篡改数组的一些方法(push,splice,shift等等)，使其能够支持响应式
if (Array.isArray(value)) {
 if (hasProto) {
  protoAugment(value, arrayMethods)
 } else {
  copyAugment(value, arrayMethods, arrayKeys)
 }
 // 数组里面的元素还是数组或者对象，递归地调用 observe 函数，使其成为响应式数据
 this.observeArray(value)
} else {
 // 遍历对象，使其每个键值也能成为响应式数据  
 this.walk(value)
}
walk (obj: Object) {
  const keys = Object.keys(obj)
  for (let i = 0; i < keys.length; i++) {
   // 将对象的键值转换成 getter / setter，
   // getter 收集依赖
   // setter 通知 watcher 更新
   defineReactive(obj, keys[i])
  }
}
observeArray (items: Array<any>) {
  for (let i = 0, l = items.length; i < l; i++) {
   observe(items[i])
  }
}


我们再捋一下思路，首先在 initState 里面调用 initData，initData 得到用户配置的 data 对象后调用了 observe，observe 函数里面会实例化 Observer 类，在其构造函数里面，首先将对象的 _ ob _ 属性指向 Observer 实例（这一步是为了检测到对象添加或者删除属性之后，能触发响应式的伏笔），之后遍历当前对象的键值，调用 defineReactive 去转换成 getter / setter。
所以，来分析下 defineReactive。


// 如果是数组，先篡改数组的一些方法(push,splice,shift等等)，使其能够支持响应式
if (Array.isArray(value)) {
 if (hasProto) {
  protoAugment(value, arrayMethods)
 } else {
  copyAugment(value, arrayMethods, arrayKeys)
 }
 // 数组里面的元素还是数组或者对象，递归地调用 observe 函数，使其成为响应式数据
 this.observeArray(value)
} else {
 // 遍历对象，使其每个键值也能成为响应式数据  
 this.walk(value)
}
walk (obj: Object) {
  const keys = Object.keys(obj)
  for (let i = 0; i < keys.length; i++) {
   // 将对象的键值转换成 getter / setter，
   // getter 收集依赖
   // setter 通知 watcher 更新
   defineReactive(obj, keys[i])
  }
}
observeArray (items: Array<any>) {
  for (let i = 0, l = items.length; i < l; i++) {
   observe(items[i])
  }
}


首先，我们从 defineReactive 可以看出，每个响应式属性都有一个 Dep 实例，这个是用来收集 watcher 的。由于 getter 与 setter 都是函数，并且引用了 dep，所以形成了闭包，dep 一直存在于内存当中。因此，假如在渲染组件的时候，如果使用了响应式属性 a，就会走到上述的语句1，dep 实例就会收集组件这个 renderWatcher，因为在对 a 进行 setter 赋值操作的时候，会调用 dep.notify() 去 通知 renderWatcher 去更新，进而触发响应式数据收集新一轮的 watcher。
那么语句2与3，到底是什么作用呢
我们举个栗子分析


<div>{{person}}<div>




export default {
 data () {
  return {
   person: {
    name: '张三',
    age: 18
   }    
  }
 }
}

this.person.gender = '男' // 组件视图不会更新


因为 Vue 是无法探测到对象增添属性，所以也没有一个时机去触发 renderWatcher 的更新。
为此, Vue 提供了一个 API， this.$set ，它是 Vue.set 的别名。


export function set (target: Array<any> | Object, key: any, val: any): any {
 if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.length = Math.max(target.length, key)
  target.splice(key, 1, val)
  return val
 }
 if (key in target && !(key in Object.prototype)) {
  target[key] = val
  return val
 }
 const ob = (target: any).__ob__
 if (target._isVue || (ob && ob.vmCount)) {
  process.env.NODE_ENV !== 'production' && warn(
   'Avoid adding reactive properties to a Vue instance or its root $data ' +
   'at runtime - declare it upfront in the data option.'
  )
  return val
 }
 if (!ob) {
  target[key] = val
  return val
 }
 defineReactive(ob.value, key, val)
 ob.dep.notify()
 return val
}


set 函数接受三个参数，第一个参数可以是 Object 或者 Array，其余的参数分别为 key, value。如果利用这个 API 给 person 增加一个属性呢？


this.$set(this.person, 'gender', '男') // 组件视图重新渲染


为什么通过 set 函数又能触发重新渲染呢？注意到这一句, ob.dep.notify() ， ob 怎么来的呢，那就得回到之前的 observe 函数了，其实 data 经过 observe 处理之后变成下面这样。


{
 person: {
  name: '张三',
  age: 18,
  __ob__: {
   value: ...,
   dep: new Dep()
  }
 },
 __ob__: {
  value: ...,
  dep: new Dep()
 }
}
// 只要是对象，都定义了 __ob__ 属性，它是 Observer 类的实例


从 template 来看，视图依赖了 person 这个属性值，renderWatcher 被收集到了 person 属性的 Dep 实例当中，对应 defineReactive 函数定义的 语句1 ，同时， 语句2 的作用就是将 renderWatcher 收集到 person._ ob _.dep 当中去，因此在给 person 增加属性的时候，调用 set 方法才能获取到 person._ ob _.dep，进而触发 renderWatcher 更新。
那么得出结论，语句2的作用是为了能够探测到响应式数据是对象的情况下增删属性而引发重新渲染的。 
再举个栗子解释下 语句3 的作用。


<div>{{books}}<div>




export default {
 data () {
  return {
   books: [
    {
     id: 1,
     name: 'js'
    }
   ]    
  }
 }
}


因为组件对 books 进行求值，而它是一个数组，所以会走到语句3的逻辑。


if (Array.isArray(value)) { // 语句3
  dependArray(value)
}

function dependArray (value: Array<any>) {
 for (let e, i = 0, l = value.length; i < l; i++) {
  e = value[i]
  e && e.__ob__ && e.__ob__.dep.depend()
  if (Array.isArray(e)) {
   dependArray(e)
  }
 }
}


从逻辑上来看，就是循环 books 的每一项 item，如果 item 是一个数组或者对象，就会获取到 item._ ob _.dep，并且将当前 renderWatcher 收集到 dep 当中去。
如果没有这一句，会发生什么情况？考虑下如下的情况：


this.$set(this.books[0], 'comment', '棒极了') // 并不会触发组件更新


如果理解成 renderWatch 并没有对 this.books[0] 进行求值，所以改变它并不需要造成组件更新，那么这个理解是有误的。正确的是因为数组是元素的集合，内部的任何修改是需要反映出来的，所以语句3就是为了在 renderWatcher 对数组求值的时候，将 renderWatcher 收集到数组内部每一项 item._ ob _.dep 当中去，这样只要内部发生变化，就能通过 dep 获取到 renderWatcher，通知它更新。
那么结合我的业务代码，就分析出来问题出现在语句3当中。


<div class="card-content">
 <div class="block" v-for="item in cardData" :key="item.secName">
  <div class="sub-title">{{item.secName}}</div>
  <div class="group">
   <span
    @click="cardClick(index + item.startIndex)"
    class="item"
    :class="getItemClass(index + item.startIndex)"
    v-for="(subItem, index) in item.secTids"
    :key="subItem">{{index + item.startIndex + 1}}</span>
  </div>
 </div>
</div>




getItemClass (index) {
 const ret = {}
 // 如果是做对的题目,但并不是当前选中
 ret['item_true'] = this.questions[index]......
 // 如果是做对的题目，并且是当前选中
 ret['item_true_active'] = this.questions[index]......
 // 如果是做错的题目,但并不是当前选中
 ret['item_false'] = this.questions[index]......
 // 如果是做错的题目，并且是当前选中
 ret['item_false_active'] = this.questions[index]......
 // 如果是未做的题目，但不是当前选中
 ret['item_undo'] = this.questions[index]......
 // 如果是未做的题目，并且是当前选中
 ret['item_undo_active'] = this.questions[index]......
 return ret
},


首先 cardData 是一个分组数据，循环里面套循环，假设有 10 个章节， 每个章节有 200 道题目，那么其实会执行 2000 次 getItemClass 函数，getItemClass 内部会有 6 次对 questions 进行求值，每次都会走到 dependArray，每次执行 dependArray 都会循环 2000 次，所以粗略估计 2000 * 6 * 2000 = 2400 万次，如果假设一次执行的语句是 4 条，那么也会执行接近一亿次的语句，性能自然是原地爆炸！
既然从源头分析出了原因，那么就要找出方法从源头上去解决。
拆分组件
很多人理解拆分组件是为了复用，当然作用不止是这些，拆分组件更多的是为了可维护性，可以更语义化，在同事看到你的组件名的时候，大概能猜出里面的功能。而我这里拆分组件，是为了隔离无关的响应式数据造成的组件渲染。从上图可以看出，只要任何一个响应式数据改变，Paper 都会重新渲染，比如我点击收藏按钮，Paper 组件会重新渲染，按道理只要收藏按钮这个 DOM 重新渲染即可。
在嵌套循环中，不要用函数
性能出现问题的原因是在于我用了 getItemClass 去计算每一个小圆圈的样式，而且在函数里面还对 questions 进行了求值，这样时间复杂度从 O(n²) 变成了 O(n³)(由于源码的 dependArray也会循环)。最后的解决方案，我是弃用了 getItemClass 这个函数，直接更改了 cardData 的 tids 的数据结构，变成了 tInfo，也就是在构造数据的时候，计算好样式。


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。
实现一个需求很容易，但是要把性能做到最佳，成本可能急剧增加。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。