Vue性能优化之深挖数组的示例分析

这篇文章主要介绍Vue性能优化之深挖数组的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联的客户来自各行各业，为了共同目标，我们在工作上密切配合，从创业型小企业到企事业单位，感谢他们对我们的要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括成都网站设计、成都网站建设、外贸网站建设、电商网站开发、微信营销、系统平台开发。

背景

最近在用 Vue 重构一个历史项目，一个考试系统，题目量很大，所以核心组件的性能成为了关注点。先来两张图看下最核心的组件 Paper 的样式。

Vue性能优化之深挖数组的示例分析

从图中来看，分为答题区与选择面板区。

稍微对交互逻辑进行下拆解：

答题模式与学习模式可以相互切换，控制正确答案显隐。
单选与判断题直接点击就记录答案正确性，多选是选择答案之后点击确定才能记录正确性。
选择面板则是记录做过的题目的情况，分为六种状态（未做过的，未做过且当前选择的，做错的，做错的且当前选择的，做对的，做对的且当前选择的），用不同的样式去区别。
点击选择面板，答题区能切到对应的题号。

基于以上考虑，我觉得我必须有三个响应式的数据：

currentIndex：当前选中题目的序号。
questions：所有题目的信息，是个数组，里面维护了每道题的问题、选项、正确与否等信息。
cardData：题目分组的信息，也是个数组，按章节名称对不同的题目进行了分类。

数组每一项数据结构如下：

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
}]

由于题目可以左右滑动切换，所以我每次从 questions 取了三个数据去渲染，用的是 cube-ui 的 Slide 组件，只要自己根据 this.currentIndex 结合 computed 特性去动态的切割三个数据就行。

这一切都显得很美好，尤其是即将结束了一个历史项目的核心组件的编写之前，心情特别的舒畅。

然而转折点出现在了渲染选择面板样式这一步

代码逻辑很简单，但是发生了让我懵逼的事情。


 
  {{item.secName}}

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 }

export function observe (value: any, asRootData: ?boolean): Observer | void { if (!isObject(value) || value instanceof VNode) { return } let ob: Observer | void if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = value.__ob__ } else if ( shouldObserve && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue ) { ob = new Observer(value) } if (asRootData && ob) { ob.vmCount++ } return ob }

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) { for (let i = 0, l = items.length; i < l; i++) { observe(items[i]) } } }

// 刚开始的 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: ... } }

// 如果是数组，先篡改数组的一些方法(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) { for (let i = 0, l = items.length; i < l; i++) { observe(items[i]) } }

export function set (target: Array | 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 }

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

if (Array.isArray(value)) { // 语句3 dependArray(value) } function dependArray (value: Array) { 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) } } }

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

const questions = this.questions // good // bad // questions[0] this.questions[0] // questions[1] this.questions[1] // questions[2] this.questions[2] ...... // 前者只会对 this.questions 一次求值，后者会三次求值

大橙子网站建设，新征程启航

Vue性能优化之深挖数组的示例分析

其他资讯