事情的缘由
在写一个项目的时候希望使用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 Iterator
的Object.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 一个渴望成长的码农