【vue源碼】深度理解v-for

最近在閱讀element源碼的，可是element內部有不少this._l方法，element源碼裏面也找不到，查了一下，原來是vue的內部渲染列表的方法

源碼位置，代碼不長，能夠一讀

三個工具函數

isDef

isDef是isDefined的縮寫，反過來就是isUndefined，反正就是看它是否是undefined

function isDef (v) {
  return v !== undefined && v !== null
}
複製代碼

isObject

isObject，主要區分原始值和對象

function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}
複製代碼

hasSymbol

用來判斷當前宿主環境是否支持原生 Symbol 和 Reflect.ownKeys。首先判斷 Symbol 和 Reflect 是否存在，並使用 isNative 函數保證 Symbol 與 Reflect.ownKeys 所有是原生定義

var hasSymbol =
  typeof Symbol !== 'undefined' && isNative(Symbol) &&
  typeof Reflect !== 'undefined' && isNative(Reflect.ownKeys);

/* 判斷是不是內置方法 */
function isNative (Ctor) {
  return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}
複製代碼

renderList

在src/core/instance/render-helpers/index.js 的installRenderHelpers方法中，renderList方法複製給了target._l ，即this._l = renderList

代碼邏輯很清晰，分四種狀況（你能夠把val看做被v-for的那個值）

val 爲 Array，或者 String

ret = new Array(val.length)
for (i = 0, l = val.length; i < l; i++) {
  ret[i] = render(val[i], i)
}
複製代碼

val 爲 number

居然還支持 number ！！

ret = new Array(val)
for (i = 0; i < val; i++) {
    ret[i] = render(i + 1, i)
}
複製代碼

val 爲 Object

• 支持Symbol,且含有迭代器的狀況

Symbol.iterator 爲每個對象定義了默認的迭代器，內置類型中，Array，String，Map，Set，TypedArray而Object沒有

因此爲了可以使用迭代器，咱們能夠本身定義一個迭代器，示例代碼：

const obj = {
  age: 1,
  name: 'liu',
  [Symbol.iterator]: function*() {
    let properties = Object.keys(this)
    for (let i of properties) {
      yield [i, this[i]]
    }
  }
}

const res = obj[Symbol.iterator]()
console.log('res', res.next())
複製代碼

因此，若是你有自定義列表順序的需求的話，能夠自定義一個迭代器，定義遍歷的值的順序

ret = []
const iterator: Iterator<any> = val[Symbol.iterator]()
let result = iterator.next()
while (!result.done) {
    ret.push(render(result.value, ret.length))
    result = iterator.next()
}
複製代碼

• 不支持Symbol的狀況

這種狀況比較簡單，經過Object.key生成對象的屬性數組，而後遍歷一下

keys = Object.keys(val)
ret = new Array(keys.length)
for (i = 0, l = keys.length; i < l; i++) {
    key = keys[i]
    ret[i] = render(val[key], key, i)
}
複製代碼

val 沒有被定義的狀況

返回一個空數組

if (!isDef(ret)) {
    ret = []
}
複製代碼

PS: 雖然我以爲這種異常狀況應該置於最前，屬於我的編碼習慣，問題不大

總結

• v-for 能夠對數字，字符串進行遍歷
• 能夠自定義對象的迭代器，實現自定義列表順序
• TypeArray 是有迭代器的，即v-for能夠渲染類數組
• v-for 裏面作了異常處理，因此當你傳入了不屬於Array，String，Number，Object的值時，v-for渲染一個空數組

源代碼

import { isObject, isDef, hasSymbol } from 'core/util/index'

/** * Runtime helper for rendering v-for lists. */
export function renderList ( val: any, render: ( val: any, keyOrIndex: string | number, index?: number ) => VNode ): ?Array<VNode> {
  let ret: ?Array<VNode>, i, l, keys, key
  if (Array.isArray(val) || typeof val === 'string') {
    ret = new Array(val.length)
    for (i = 0, l = val.length; i < l; i++) {
      ret[i] = render(val[i], i)
    }
  } else if (typeof val === 'number') {
    ret = new Array(val)
    for (i = 0; i < val; i++) {
      ret[i] = render(i + 1, i)
    }
  } else if (isObject(val)) {
    if (hasSymbol && val[Symbol.iterator]) {
      ret = []
      const iterator: Iterator<any> = val[Symbol.iterator]()
      let result = iterator.next()
      while (!result.done) {
        ret.push(render(result.value, ret.length))
        result = iterator.next()
      }
    } else {
      keys = Object.keys(val)
      ret = new Array(keys.length)
      for (i = 0, l = keys.length; i < l; i++) {
        key = keys[i]
        ret[i] = render(val[key], key, i)
      }
    }
  }
  if (!isDef(ret)) {
    ret = []
  }
  (ret: any)._isVList = true
  return ret
}
複製代碼