Close read Vue official documentation series 🎉

V-for iterated array

V-for can render an array into a corresponding set of lists. The format is as follows:

v-for="(item, index) in items"
v-for="(item, item) of items"
Copy the code
  • Items is the original array
  • Item Specifies the element of the current iteration
  • Index Indicates the index of the current iteration element

V-for iterates

V-for can iterate over objects just like an array, except that the meaning of the parameters is different from what is saved.

<li v-for="(value, key, index) in Objects">
   {{index}} - {{key}} - {{value}}
</li>
Copy the code
  • Value Specifies the value (key value) of the current property in the iterated object.
  • Key Specifies the name of the current property in the object iterated over.
  • Index Indicates the internal index of the object to which the property belongs.

Because the Object is traversed by object.keys (), there is no guarantee that its result order will be consistent across all JavaScript engines.

Maintaining state

When v-for is used to render a list, it defaults to the “update in place” strategy. If the data source changes, such as sorting, Vue does not move the order of the corresponding DOM elements to match the order of the data items, but instead updates (re-renders) each element in place.

Hence the “update in place” strategy, which does not apply to list outputs that depend on child component state or temporary DOM state (for example, form input values).

For example, when a form is lofted to input a list of controls, the DOM has been rerendered when the data source is changed, so the events attached to the DATA dataset or bound to the DOM will be reset. This is why you cannot rely on the state of child components or elements with an in-place update strategy.

If you want to improve performance, you can reuse and rearrange existing DOM elements by giving Vue a hint that it can track the identity of each node. To do this, you need to provide a unique key for each item in the list.

It does not mean that state maintenance is always enabled when key is enabled. Vue will judge whether all the data involved in rendering has changed. If all the data involved in rendering has not changed, it will decide whether to reuse the DOM object created last time without enabling the “update in place strategy” based on the existence of key value.

<div v-for="item in items" :key="item.id">
    {{item.id}} - {{item.name}} - {{item.desc}}
</div>
Copy the code

If the value of the participating item.desc changes, the in-place update strategy is applied regardless of whether the item.id changes.

Array update detection

Change the method.

Change methods are those that operate on the array itself and change the value of the array itself. Vue enables responsive view updates by wrapping methods like push(), POP (), unshift(), shift(), splice(), sort(), reverse(), etc., to listen for array changes.

Replace method

The substitution array method refers to an array based on the current operation, returning a new array, such as map(), filter(), concat(), slice(), and so on. For the replace array method, you can only replace an old array with a new one.

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)})Copy the code

Matters needing attention

Due to JavaScript limitations, Vue cannot detect new attributes for objects and new index lengths and array elements for arrays.

this.items[this.items.length-1] = 'new last';
this.itemsObj['last'] = 'new last';
this.itemsObj.oldLast = 'oldLast';
Copy the code

This is because during the initialization phase, Vue will pre-set the listening Settings for the attributes in the data selection. However, since the attributes added after initialization are not added to the listening sequence of Vue in advance, they are not converted into responsive members and cannot trigger the responsive update of the view. One solution is to use the vm.$set() method.

A copy of list data

If we want to produce copies of a list of data based on the original list data (filtering, sorting, etc.) without changing the original data, we can return the sorted or filtered copy of the data either by ** “calculation properties” or by “method” **.

<! -- Use calculated properties -->
<li v-for="item in listDataSortCopy"></li>
<! Recalculation returns using the method -->
<li v-for="item in filterData(listData)"></li>
Copy the code

Because of the caching nature of computational properties, performance considerations should be preferred.

Specify number of repetitions

V-for can also accept integers to control the number of times specified elements are repeated in the template.

<li v-for="n in 10">{{n}}<li>
Copy the code

The list of groups

As with conditional grouping, you can implement a list grouping using V-for on the

<table>
    <template v-for="n in 10">
        <tr></tr>
    </template>
</table>
Copy the code

V – with v – if the for

It is not recommended to use v-if and V-for on the same element.

Since v-for has a higher priority than V-if, if you use both on the same element, you are always doing the conditional judgment in the loop.

<ul>
    <li v-for="item in items" v-if="item.show"></li>
<ul>
Copy the code

In the example above, v-for loops a fixed number of times, regardless of whether the current item needs to be visible or not, and the condition is evaluated again each time through the loop. There are two ways to optimize:

  1. Based on the specific requirement scenario, whether can bev-ifTo extractv-forThe next level up?
  2. Always filter data by calculating attributes or methods before looping, reserving only items that match the criteria, and avoidingv-for 与 v-ifUse together.