不少人不知道 v-for 能夠這樣解構！

做者：Michael Thiessen 譯者：前端小智 來源：medium

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

最近發現咱們可使用v-for進行解構。

之因此起做用，是由於 Vue 將v-for的整個第一部分直接提高到函數的參數部分：

<li v-for="____ in array">
</li>
複製代碼

function (____) {
  //...
}
複製代碼

而後，Vue 在內部使用此函數來渲染列表。

這說明能夠放在函數中括號中的任何有效Javascript也能夠放在v-for中，以下所示：

<li v-for="{ // Set a default radius = 20, // Destructure nested objects point: { x, y }, } in circles">
複製代碼

你能夠在這裏爲非做歹，只是不要太瘋狂😉。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

其餘 v-for 技巧

衆所周知，能夠經過使用以下元組從v-for中獲取索引：

<li v-for="(movie, index) in [ 'Lion King', 'Frozen', 'The Princess Bride' ]">
  {{ index + 1 }} - {{ movie }}
</li>
複製代碼

當使用一個對象時，你也能夠捕獲 key:

<li v-for="(value, key) in { name: 'Lion King', released: 2019, director: 'Jon Favreau', }">
  {{ key }}: {{ value }}
</li>
複製代碼

還能夠將這兩種方法結合使用，獲取屬性的鍵和索引:

<li v-for="(value, key, index) in { name: 'Lion King', released: 2019, director: 'Jon Favreau', }">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>
複製代碼

Vue 確實支持對 Map 和Set對象進行迭代，可是因爲它們在 Vue 2.x 中不具備響應性，所以其用途很是有限。 咱們還能夠在此處使用任何 Iterable，包括生成器。

順便說一句，我有時使用Map或Set，但一般僅做爲中間對象來進行計算。 例如，若是我須要在列表中查找全部惟一的字符串，則能夠這樣作：

computed() {
  uniqueItems() {
    // 從數組建立一個Set，刪除全部重複項
    const unique = new Set(this.items);

    // 將該 Set 轉換回可用於 Vue 的數組
    return Array.from(unique);
  }
}
複製代碼

字符串和 v-for

你知道嗎，還可使用v-for遍歷字符串？

文檔中沒有這一點，我只是在通讀代碼以弄清楚v-for是如何實現的時候才發現了它:

<p v-for="character in 'Hello, World'">
  {{ character }}
</p>
複製代碼

上面會打印每一個字符。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：forum.vuejs.org/t/destructu…

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。