Which one has higher priority, v-if or v-for in vue?

In vue2, v-for has a higher priority than v-if; in vue3, v-if has a higher priority than v-for. In Vue, never use v-if and v-for on the same element at the same time, which will cause a waste of performance (each rendering will loop first and then perform conditional judgment); if you want to avoid this situation, Templates can be nested in the outer layer (page rendering does not generate DOM nodes), v-if judgment is performed at this layer, and then v-for loop is performed internally.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer. The

v-if directive is used to conditionally render a piece of content. Directives are used to conditionally render a block of content. This content will only be rendered if the directive's expression returns true. The
v-for directive renders a list based on an array. The v-for directive requires special syntax in the form of item in items, where items is the source data array or object, and item is Is an alias for the array element being iterated.

When v-for, it is recommended to set the key value and ensure that each key value is unique, this is diffAlgorithm optimization.

<modal></modal>

    {{ item.label }}

Priority

In fact, the answers in vue2 and vue3 are completely opposite.

• In vue2, v-for has a higher priority than v-if

• In vue3, v-if has a higher priority In v-for

## v-for and v-if

in vue2 v-if and v-for are both directives in the vue template system.

When the

vue template is compiled, the command system will be converted into an executable render function.

Write a

p tag and use v-if and v-for

<div>
    <p>
        {{ item.title }}
    </p>
</div>

to create

vue Example, store isShow and items data.

const app = new Vue({
  el: "#app",
  data() {
    return {
      items: [
        { title: "foo" },
        { title: "baz" }]
    }
  },
  computed: {
    isShow() {
      return this.items && this.items.length > 0
    }
  }
})

ƒ anonymous() {
  with (this) { return 
    _c('div', { attrs: { "id": "app" } }, 
    _l((items), function (item) 
    { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

_l is the list rendering function of vue, and a if judgment will be made inside the function. Preliminary conclusion:
v-for has a higher priority than v-if. Then put
v-for and v-if in different labels

<div>
    <template>
        <p>{{item.title}}</p>
    </template>
</div>

and then output the

render function

ƒ anonymous() {
  with(this){return 
    _c('div',{attrs:{"id":"app"}},
    [(isShow)?[_v("\n"),
    _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}

At this time we can see that when

v-for and v-if act on different tags, they are judged first and then the list is rendered.

export function genElement (el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre
  }
  if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    return genSlot(el, state)
  } else {
    // component or element
    ...
}

When making

if judgment, v-for is judged before v-if.

Finally

v-for has a higher priority than v-if.

v-for and v-if in vue3

In vue3, v-if has a higher priority than v-fo, so when v-if is executed , the variable it calls does not exist yet, it will cause an exception

Explanation: There are usually two situations that cause us to do this:

1. In order to filter the list Projects, such as:

v-for="user in users" v-if="user.isActive"

In vue2, put them together. It can be seen from the output rendering function that the loop will be executed first and then the conditions will be judged, even if we only render a small part of the list elements, you have to traverse the entire list every time you re-render, which will be wasteful
• In vue3, v-if has a higher priority than v-fo, so when v-if is executed, it calls The variable does not exist yet, it will cause an exception

At this time, define a calculated property (such as

activeUsers) and let it return the filtered list (such as users.filter(u=>u.isActive)).

2. In order to avoid rendering the list that should be hidden

v-for="user in users" v-if="shouldShowUsers"

Similarly, in vue2, put them together, and it can be seen from the output rendering function that it will be executed first Loop and then judge the conditions. Even if we only render a small part of the elements in the list, we have to traverse the entire list every time we re-render, which will be wasteful.
• In vue3, writing this way will not report an error. , but the official still does not recommend doing this outside

At this time, move

v-if to the container element (such as ul, ol) or wrap a layer of template on the outside.

Note

Never use v-if and v-for on the same element at the same time, which will cause a waste of performance (Each rendering will loop first and then perform conditional judgment)

• If you want to avoid this situation, nest the template in the outer layer (page rendering does not generate dom nodes), in this layer Make v-if judgment, and then perform v-for loop internally

<template v-if="isShow">
    <p v-for="item in items">
</template>

• If the condition appears inside the loop, you can filter out those that are not in advance through the calculated attribute Items to be displayed

computed: {
    items: function() {
      return this.list.filter(function (item) {
        return item.isShow
      })
    }
}

【相关视频教程推荐：vuejs入门教程、web前端入门】

The above is the detailed content of Which one has higher priority, v-if or v-for in vue?. For more information, please follow other related articles on the PHP Chinese website!