让Vue的v-for支持迭代器遍历

5,049 阅读3分钟

事情的缘由

在写一个项目的时候希望使用Map来进行遍历,然后我取出了Map的keys,keys是一个Map Iterator(迭代器,ES6引入的Symbol.iterator)类型,这时我尝试使用v-for来对迭代器进行遍历,当然我的期望是能够遍历出来。 我们都知道vue的v-for提供了两种遍历方式,

v-for="item in items"
v-for="item of items"

而js中可以使用

for (index in items)
for (item of items) // 这种写法支持对迭代器的遍历

这时我不禁就想,既然如此,v-for当中of的遍历方式应该是支持迭代器的遍历的,但是事实尝试下来是不可以的,那么为什么不可以呢,然后就去翻查了一下Vue的源码,从中找到了这么一段代码。

/**
 * Runtime helper for rendering v-for lists.
 */
function renderList (
  val,
  render
) {
  var ret, 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)) {
    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)._isVList = true
  }
  return ret
}

我尝试在该段代码中打上了断点,然后发现迭代器本身是一个Object类型(ES5没有Symbol),但是Map IteratorObject.keys(val)则是一个空对象[],一个空的keys,所以此处不会产生遍历然后进行render

作死的开始

既然没有判断出是一个Iterator那么我就添加一个判断,由于刚开始以为不能使用ES5以上的语法,修修改改了好多次,写出了如下的代码,其实这里可以判断类型是否为Symbol.iterator

...
  } else if (isObject(val)) {
    keys = Object.keys(val)
    if (keys.length === 0 && val.toString().indexOf('Iterator') > -1) { // 可能是个迭代器
      ret = []
      i = 0
      while (true) {
        if (typeof val.next !== 'function') {
          break
        }
        var next = val.next()
        if (next.done) {
          break
        }
        ret.push(render(next.value, i++))
      }
    } else {
      ret = new Array(keys.length)
      for (i = 0, l = keys.length; i < l; i++) {
        key = keys[i]
        ret[i] = render(val[key], key, i)
      }
    }
  }
 ...

Symbol类型有个方法是Symbbol.toStringTag

Symol.toStringTag
A string value for the default description of an Object. Used by
Object.prototype.toString()

查阅资料看到了这么一段话,那么我就是用toString方法去取出迭代器的description然后使用indexOf去判断是否包含Iterator来区分是不是一个迭代器。
这里使用了while却没有使用for...of的写法, 由于修改的是dist的文件所以不敢尝试ES5+的写法。 然后一切都看起来很完美,但是运行的时候却走到了handleError(e, vm, "render") 一个ERROR分支...百思不得其解...
经过了N轮的断掉调试,我终于定位了到问题的所在。
由于测试的时候是基于项目做的,项目用的ElementUI,其中用到了form组件,层层定位发现是v-model的值为空造成的Error,然后写了一份简单的v-for发现竟然真的可以了。

template...
<div v-for="item of iterator">
  {{item}}
</div>
script...
data () {
  return {
    iterator: this.getIterator()
  }
},
methods: {
  getIterator () {
    let map = new Map()
    map.set('title', '')
    map.set('value', '')
    return map.keys()
  }
}
output...
title
value

总结

虽然我在Vue上做了一个ES5+的尝试不知道合不合理,但是在这个探索的过程中学到了很多,希望能对大家有所帮助。
其中了解了Symbol类型究竟是个怎样的类型,了解了迭代器的实现,实践了断点定位问题等等...一个晚上的付出没白费,还是比较欣喜的。

End

I'm 一个渴望成长的码农