乐趣区

很多人不知道-vfor-可以这样解构

jiezi

作者：Michael Thiessen
译者：前端小智
来源：medium

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎 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。

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

交流

文章每周持续更新，可以微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎 Star 和完善，大家面试可以参照考点复习，另外关注公众号，后台回复 福利，即可看到福利，你懂的。

退出移动版