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 '