一、缘起 v-for 中的 of

你听我“狡辩”，事情是这样子......

今天看了看我师父写的 vue 代码，越看那个 v-for 循环越不对劲儿，以下是我模拟的我师父写的代码，你且细看~

这是代码

<template>
  <div id="hobby">
    <ul>
      <li v-for="item of hobbyList" :key="item.id">{{ item.hobby }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hobbyList: [
        { id: 1, hobby: "吃饭" },
        { id: 1, hobby: "睡觉" },
        { id: 1, hobby: "打豆豆" }
      ]
    }
  }
}
</script>

这是页面的效果

二、挣扎 v-for 中的 of 和 in

乍一看，没毛病啊！这不就是很简单的 v-for 循环嘛，有图有真相，有什么好说的呢！对呀，可我就是眼拙，又看了一眼，这一眼便陷进去了...什么鬼？ v-for="item of hobbyList" ??? 是 of 不是 in吗？

那一刻，激动地心颤抖地手啊，连忙全局搜索 v-for ！因为我已经很久没有写 vue 的代码了，开始怀疑自己的记忆出了什么差错，没搞清楚之前，我是绝对不能傻乎乎地问师父的。

然鹅，出来哗啦啦的一片全是 in，只有师父这个页面是 of。倔强的我于是开始查某度、某金......一顿操作猛如虎，仍一无所获。

有那么一刻，脑海里飘了一个想法：js 中有 for...in 和 for...of ，难不成？

很可惜，这个想法一闪而过，没有深究。

最终，按捺不住内心的疑惑，我还是问了师父：你这个 v-for 循环中 of 和 in 有什么区别吗？因为我都是用 in，为什么 of 也可以呀？师父看了看，刺啦一声：诶，我也不知道嘞，我怎么写成 of 了，应该写 in 的。额，气氛有点微妙......

可是，我还想“狡辩”，其实我师父很厉害的，人狠话不多，据说来了公司很多年，是位很佛系的高级技术人员，不喜欢当老大，每天就玩玩游戏、吃吃辣条，顺便敲敲代码，主管都要敬他几分。可怜最近帮我处理 bug，有点苦逼......唉！

终于，挨到了下班。路上，给我的“老朋友”发了消息，请他忙完了回复我。结果刚下车，恰巧来了语音电话，这一聊才知道，原来就是 js 中 for...in 和 for...of 的原理，恍然大悟！谢谢啦！老朋友，祝你平安健康暴富！

三、缘灭 for...of 和 for...in

for...in 既可以循环数组

<template>
  <div id="hobby">
    <ul>
      <li v-for="(item,index) in hobbyList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hobbyList:['吃饭','睡觉','玩魔方']
    }
  }
}
</script>

for...in 也可以循环对象

<template>
  <div id="hobby">
    <ul>
      <li v-for="item in hobbyObj" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hobbyObj: {
        id: 1,
        name: "lucy",
        hobby: "吃饭",
      },
    };
  },
};
</script>

for...of 只能循环数组

<template>
  <div id="hobby">
    <ul>
      <li v-for="(item,index) of hobbyList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hobbyList:['吃饭','睡觉','玩魔方']
    }
  }
}
</script>

for...of 循环对象报错

<template>
  <div id="hobby">
    <ul>
      <li v-for="item of hobbyObj" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hobby: {
        id: 1,
        name: "lucy",
        hobby: "吃饭"
      }
    }
  }
}
</script>

所以，你知道了吗?手动捂脸！

vue 的 v-for 循环有什么好说的？