Vue指令v-for="thing in collection"和"thing of collection"有何区别？

Question

在官方Vue.js文档中，所有v-for指令的示例都采用以下格式：

v-for="thing in collection"

其中，collection 包括数组和对象。此外，文档说明：

您还可以使用 of 作为分隔符，而不是 in，以便更接近 JavaScript 迭代器的语法。

这个答案 解释了在原生 JavaScript 中 for..in 和 for..of 循环的区别。我理解，for..in 被用于循环遍历对象的属性，而 for..of 被用于循环遍历可迭代元素。

我的问题是，在 Vue 中，of 和 in 是否与原生 JavaScript 中含义相同？

- Aditya Barve

---

你有尝试使用任何样本数据并在原生和Vue.js中都进行了检查吗？如果是，请分享一下。 - Niklesh Raut

答案在此处：https://github.com/vuejs/vue/issues/2410，并且这篇关于Vue v3的文章讲述了它将如何支持新的数据类型用于“v-for”：https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf - Moumen Soliman

Answer 1

他们并不

在Vue.js中，for..of和for..in是等效且可互换的。遍历Vue.js非常灵活，可以处理各种对象和类型（甚至包括整数!请注意，TC39!）。

https://v3.vuejs.org/guide/list.html

以下是有效的Vue.js代码：

<p v-for="x of {a: 1, b: 2, c: 3}">{{x}}</p>
<p v-for="x in {a: 1, b: 2, c: 3}">{{x}}</p>
  
<p v-for="x of [1, 2, 3]">{{x}}</p>
<p v-for="x in [1, 2, 3]">{{x}}</p>

所有这些都会打印出 1，2，3。

然而，在普通JavaScript中，for..of 和 for..in 之间存在差异。

重要的区别在于，for..of 将遍历可迭代对象，而 for..in 将遍历可枚举属性。 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in

for (const x of {a: 1, b: 2, c: 3}) {console.log(x);} // TypeError ... is not iterable
for (const x in {a: 1, b: 2, c: 3}) {console.log(x);} // Prints a b c

for (const x of [1, 2, 3]) {console.log(x);} // Prints 1 2 3
for (const x in [1, 2, 3]) {console.log(x);} // Prints 0 1 2 (the indexes)

你可以看到，它们的行为非常不同。

即使是看起来相同的代码 (for..in {a: 1, b: 2, c: 3}) 在 Vue.js 和普通的 JavaScript 中会产生不同的结果，一个会输出 1、2、3，另一个会输出 a、b、c。

- Ionaru