vue2之v-for详解

了解vue的应该都知道v-for指令是用来遍历 数组、对象的，但是vue居然还能遍历整数！！！第一眼看到遍历v-for整数的代码我觉得是写错了。。。好吧，是我太菜了。接下来我们一起来看看。

（1）遍历数组

<ul id="example-1">
  <li v-for="(item, index) in items" :key="index">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

也可用 of 替代 in 作为分隔符。

<div v-for="(item, index) of items" :key="index"></div>

（2）遍历对象

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下是一致的。

 

（3）遍历整数

理论上来说，整数不是一个可遍历的单元，但是vue相当于给我们提供了一个方便方式来减少重复代码。

<div id="app">
  <ul>
    <li v-for="n in num">{{n}}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    num: 3
  }
})

结果会渲染出 1,2,3。

好奇去看了下vue实现源码。其实原理很简单，就是判断不同的数据类型来进行不同的遍历。主要代码如下：

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);
    }
  }