Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the ways to write a Vue v-for cycle". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways to write a Vue v-for cycle"?

This is especially useful in situations such as:

Render an array or list

Traverse object properties

The most basic use of the v-for loop in Vue is as follows:

{{product.name}}

In this article, however, we'll show you some great ways to make your v-for code more accurate, predictable, and efficient.

Let's get started.

1. Always use key in a v-for loop

First, we discuss a common best practice that most Vue developers already know-- to use in the v-for loop: key. By setting unique key properties, you can ensure that the component works as expected.

If we don't use: key,Vue will make DOM as efficient as possible. This can cause v-for elements to be out of order or other unpredictable behavior.

If we have a unique key reference for each element, we can better predict how to manipulate DOM.

{{product.name}} 2. Use v-for loops to a certain extent

Although most of the time v-for is used for looping arrays or objects, there are cases where we only want to iterate a certain number of times.

For example, suppose we are creating a paging system for an online store, and we only want to display 10 products per page. You can handle paging like this by using variables to track the current page number.

{{products [page * 10 + index]} 3. Avoid using v-if in loops

A very common mistake is to use v-if to filter data from v-for loops.

Although it looks intuitive, this can lead to a huge performance problem-VueJS will take precedence over v-if instructions.

This means that the component will traverse each element and then check the v-if condition to see if it should be rendered.

If you use v-if with v-for, whatever the conditions are, you will traverse every item in the array.

/ / Bad practices! {{product.name}}

So what's the problem?

Suppose the products array has several thousand items, but only three products are on sale that you want to render.

Each time you re-render, Vue has to traverse thousands of items, even if the three products sold have not changed at all.

The combination of v-if and v-for must be avoided as far as possible.

Next, we will introduce two alternatives.

4. Use the computed property or method

To avoid the above problems, we should filter the data before iterating in the template. There are two very similar ways to do this:

Use the computed property

Use the filtering method

It's your choice. Let's quickly introduce these two methods.

First, we only need to set a computed property. To get the same functionality as the previous v-if, the code looks like this.

{{product.name}} export default {data () {return {products: []}}, computed: {productsOnSale: function () {return this.products.filter (product = > product.onSale)}

The benefits are as follows:

Data properties are only reevaluated when dependencies change

The template traverses only the products on sale, not every product

The code that uses the filtering method is almost the same, but using the method changes the way the values inside the template are accessed. However, if we want to be able to pass variables to the filtering process, we should choose the method path.

{{product.name}} export default {data () {return {products: []}}, methods: {productsOnSale (maxPrice) {return this.products.filter (product = > product.onSale & & product.price < maxPrice)}} 5. Or outsourcing a layer of elements in a cycle.

When deciding whether to fully render the list, you may still want to combine v-for with v-if.

For example, what if we only want to present the product list when the user logs in.

Error code:

{{product.name}}

What's wrong with that?

Same as before. The Vue template gives priority to vFMI-so it iterates over each element and checks for v-if.

Even if nothing is rendered in the end, thousands of elements will be cycled.

For this example, a simple solution is to move the v-if statement.

Better code!

{{product.name}}

This is much better, because if isLoggedIn is false--, there is no need for iteration at all.

6. Access the index in the loop

In addition to traversing the array and accessing each element, we can also track the index of each item.

To do this, we need to add an index value after the project. This is super simple, but useful for paging, displaying list indexes, displaying rankings, and so on.

Product # {{index}}: {{product.name}} 7. Iterative object

So far, we have only studied using v-for to traverse arrays. But we can also easily learn to iterate over the key-value pairs of objects.

Similar to the index of the access element, we need to add another value to the loop. If we loop through the object with a single parameter, we will loop through all items.

If we add another parameter, we will get the item and key. If we add a third parameter, we can also access the index of the v-for loop.

Suppose we want to traverse every attribute in the product. Then the code is as follows:

{{item}} Thank you for your reading. The above is the content of "what are the ways to write a Vue v-for cycle?" after the study of this article, I believe you have a deeper understanding of the way of writing a Vue v-for cycle, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.