Vue 指令 v-for="集合中的东西" vs "集合中的东西"

Question

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

\n

v-for="thing in collection"\n

\n

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

\n

\n

您还可以使用of代替 作为分隔符in，这样它更接近迭代器的 JavaScript\xe2\x80\x99s 语法。

\n

\n

这个答案解释了普通 JavaScript 中循环for..in和循环之间的区别。for..of据我了解，for..in用于循环对象的属性和for..of用于循环可迭代的元素。

\n

我的问题是， Vue 中的of和in与普通 JavaScript 中的含义相同吗？

\n

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

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for... of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /声明/for...in

重要的区别在于，for..of将迭代可迭代对象，而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。