javascript - Vue 指令 v-for ="thing in collection"vs "thing of collection"

Question

在官方 Vue.js 文档中，v-for directive 的所有示例具有以下格式:

v-for="thing in collection"

在哪里 collection包括数组和对象。此外，文档指出:

You can also use of as the delimiter instead of in, so that it is closer to JavaScript’s syntax for iterators.

This answer解释 for..in 之间的区别和 for..of原生 JavaScript 中的循环。据我了解， for..in用于循环对象的属性和 for..of用于循环遍历可迭代的元素。
我的问题是 , 做 of和 in在 Vue 中的含义与在原生 JavaScript 中的含义相同吗？

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 .
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/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 .