VUE:v-for的使用及源码

一、前言

v-for可以说是vue中使用最多的指令之一，不过，你真的了解它吗？v-for不仅仅能用于遍历数组，也不仅仅能用于遍历对象。

二、使用

先说结论：v-for可以遍历数组、对象、数字以及字符串，以及，在vue3版本新增的对于部署了iterator接口的对象的支持。下面是各种场景的分析，以(item,index) in obj的使用方式为例：

<div v-for="(item,index) in obj"></div>

 

1.遍历数组

遍历数组时，item是数组的当前项，index是对应的下标

//(item,index) in [1,2,3]
// item : 1 2 3
// index: 0 1 2

2.遍历对象

遍历对象时，item是对象键值对的value，index是对应的key

遍历顺序，和Object.keys(obj)、Object.values(obj)的遍历顺序是一样的，即先是数值键，按升序遍历；然后是字符串键，按加入时间遍历；然后是Symbol键，按加入时间遍历

//  obj = {
//   1: 1,
//   v: 2,
//   c: 3,
// };
//(item,index) in obj
// item : 1 2 3
// index: 1 v c

3.遍历字符串

item是字符串的每个字符，index是对应的下标

// (item,index) in 'abc'
// item: a b c
// index: 0 1 2

4.遍历数字

遍历数字n时，item是从1到n的数字，index是对应的顺序，以0为起始值(可以理解为遍历从1到n的数组)

// (item,index) in 3
// item: 1 2 3
// index: 0 1 2

5.遍历有interator接口的对象

iterator接口，不明白的可以查阅阮一峰老师的es6标准入门，地址戳我

比如Set、Map、classList等等

v-for在遍历这类对象时，会先用Array.from将这些对象转换为数组，然后就和遍历数组类似的了

// const set = new Set([3, 4, 5]);
// (item,index) in set
// item: 3 4 5
// index: 0 1 2

// const map = new Map();
// map.set(1,2)
// map.set(3,4)
// map.set(5,6)
// (item,index) in map
// item: [1,2] [3,4] [5,6]
// index: 0 1 2

三、源码

这里放下源码(位于core/instance/render-helpers/render-list.js文件内)，源码看起来很容易理解，就不多说了，其实就是对各种情况的处理。(这里放的是vue3版本的远吗，vue2版本的，没有对iterator做特殊处理，所以vue2版本的v-for也不能用于遍历Set、Map等)

function renderList(source, renderItem) {
    let ret;
    if (isArray(source) || isString(source)) {
        ret = new Array(source.length);
        for (let i = 0, l = source.length; i < l; i++) {
            ret[i] = renderItem(source[i], i);
        }
    }
    else if (typeof source === 'number') {
        ret = new Array(source);
        for (let i = 0; i < source; i++) {
            ret[i] = renderItem(i + 1, i);
        }
    }
    else if (isObject(source)) {
        if (source[Symbol.iterator]) {
            ret = Array.from(source, renderItem);
        }
        else {
            const keys = Object.keys(source);
            ret = new Array(keys.length);
            for (let i = 0, l = keys.length; i < l; i++) {
                const key = keys[i];
                ret[i] = renderItem(source[key], key, i);
            }
        }
    }
    else {
        ret = [];
    }
    return ret;
}