Vue.js 中的 v-for... in 和 v-for... of 兩者的使用情境

有天公司前端團隊在幫我 code review 時第一次知道原來 Vue.js 內的指令 v-for 其實有不同的寫法，這邊想做一個紀錄順便跟大家分享一個這個對我來說算蠻新鮮的資訊。

v-for

Render the element or template block multiple times based on the source data.

根據官方文件的內容可以知道，v-for 這個指令會根據我們所提供的原始資料數量決定要執行渲染的次數。
其實光看指令的名稱包含了 for 這個單字就蠻容易聯想到它的功能或許會跟迴圈有相關，不過我一直以來都是以官方文件提供的這個寫法來做開發：

<div v-for="item in items">
  {{ item.text }}
</div>

通常我用到 v-for 這個指令的時候都是我有陣列的資料需要去做渲染的需求，像是 Table 的列表或是要顯示相同但多張的 card 元件等。

---

兩種寫法的差異

先說結論：兩種寫法的結果是一樣的，沒有差別。
但為什麼還要拿出來討論甚至做筆記呢？

因為這次會知道新的寫法是剛好在公司重構專案時遇到一個需要迭代的 Table ，裡面有物件也有陣列的資料格式。我像以前一樣全部都使用 v-for... in 這個寫法，結果在 code review 上得到一個 feedback ：如果迭代的資料類型是陣列的話可以改成 v-for... of 的寫法，這樣會讓團隊其他的人又或者是以後要來維護這個專案的開發人員能夠知道這邊渲染的格式會是一個陣列。

<div v-for="item of array">
  {{ item.text }}
</div>

另外，其實在官方文件中也有特別提到如果要迭代的內容是陣列的話，改用 v-for... of 的話也會比較貼近 JavaScript 原本的語法 for ...of 。
換句話說， v-for... in 這個寫法也會更貼近 JavaScript 原生的語法 for ...in 的形式，會更為適合用在迭代物件屬性的值時拿來使用。

---

感想

這一年來在工作上多了許多跟他人協作開發的機會，慢慢體會到這些看似很細微的東西其實都有蠻大程度會影響到整個團隊的開發效率和溝通成本。
就像是前端主管常跟我們說的，程式碼不是要用多冷門的語法或是多精簡的方式才是最好的，應該是要能夠清楚地表達出這段程式碼要完成的功能和邏輯，以及能讓不同程度的工程師都理解這邊要解決的問題是什麼？
所以往後會在這些地方多留心，也期許自己能夠更細緻的處裡這些程式碼。
那我們下次見ʘ‿ʘ

---

參考資料

• List Rendering - Vue.js

• v-for of 与 v-for in 的的区别

• JS-for…in 與 for…of 的差別