Many people don't know that v-for can be deconstructed like this!

Author: Michael Thiessen
Translator: Front-end Xiaozhi Source: medium

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

It was recently discovered that we can use v-for for deconstruction.

This works because Vue hoists the entire first part of v-for directly into the function's arguments section:

 <li v-for="____ in array">
</li>

 function (____) {
  //...
}

Vue then uses this function internally to render the list.

This says that any valid Javascript that can be placed in parentheses in a function can also be placed in a v-for, like this:

 <li v-for="{
  // Set a default
  radius = 20,

  // Destructure nested objects
  point: { x, y },
} in circles">

You can do bad things here, just don't get too crazy 😉.

Everyone said that there is no project to write on the resume, so I helped you find a project, and also included a [Building Tutorial] .

Other v-for tricks

It is known that the index can be obtained from v-for by using a tuple like this:

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

When using an object, you can also capture key :

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

You can also combine these two methods to get the key and index of a property:

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

Vue does support iteration over Map and Set objects, but since they are not reactive in Vue 2.x , their usefulness is very limited. We can also use any Iterable here, including generators.

By the way, I sometimes use Map or Set , but usually only as an intermediate object for calculations. For example, if I need to find all unique strings in a list, I can do this:

 computed() {
  uniqueItems() {
    // 从数组创建一个Set，删除所有重复项
    const unique = new Set(this.items);

    // 将该 Set 转换回可用于 Vue 的数组
    return Array.from(unique);
  }
}

String sum v-for

Did you know that you can also use v-for to iterate over strings?

This is not in the documentation, I just found it while reading through the code to figure out how v-for is implemented:

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

The above will print each character.

---

The bugs that may exist in editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, here is a useful BUG monitoring tool , Fundebug .

Original: https://forum.vuejs.org/t/destructuring-rest-parameter/23332

---

communicate with

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.