不少人不知道 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和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。