很多人不知道 v-for 可以這樣解構！

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

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

最近發現我們可以使用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。

原文：https://forum.vuejs.org/t/des...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。