Home >Web Front-end >Front-end Q&A >What is the difference between v-if and v-for in vue
The difference between v-if and v-for: 1. Different functions. The v-if instruction is used to conditionally render a piece of content. This piece of content will only be rendered when the expression of the instruction returns a true value. Rendering; the v-for directive renders a list based on an array. 2. The priorities are different. v-for has a higher priority than v-if. When judging if, v-for is judged before v-if.
The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.
First of all, it is clearly stated in the official documentation that v-for and v-if are not recommended to be used together.
The v-if directive is used to conditionally render a piece of content. This content will only be rendered when the expression in the directive returns a true value.
The v-for directive renders a list based on an array. The v-for directive requires special syntax of the form item in items
, where items is the source data array or object, and item is the alias of the array element being iterated.
In v-for, It is recommended to set the key value and ensure that each key value is unique, which facilitates the optimization of the diff algorithm.
The difference in usage between the two is as follows:
<div v-if="isShow" >123</div> <li v-for="item in items" :key="item.id"> {{ item.label }} </li>
In In use, v-for has a higher priority than v-if
v-if and v-for are both instructions in the vue template system
When vue template is compiled, Will convert the command system into an executable render function
Example
Write a p tag and use v-if and v-for
<div id="app"> <p v-if="isShow" v-for="item in items"> {{ item.title }} </p> </div>
to create vue Instance, the code for storing 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 } } })
template instructions will be generated in the render function, and the rendering function can be obtained through app.$options.render
ƒ 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 a list rendering of vue function, an if judgment will be performed inside the function
The initial conclusion is that v-for has a higher priority than v-if
Then v-for and v-if are placed in different labels
<div id="app"> <template v-if="isShow"> <p v-for="item in items">{{item.title}}</p> </template> </div>
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
Let’s check the vue source code again
Source code location: \vue-dev\src\compiler\codegen\index.js
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 better than v- If is judged first
The final judgment result is that v-for has a higher priority than v-if
<template v-if="isShow"> <p v-for="item in items"> </template>If the condition appears inside the loop, You can filter out items that do not need to be displayed in advance through the calculated attribute
computed: { items: function() { return this.list.filter(function (item) { return item.isShow }) } }
Case description:
Reason: v-for has a higher priority than v-if. The entire array needs to be traversed each time, causing unnecessary calculations and affecting performance.For example, use v-for to loop 100 li tags on the page, but only display the content of the li tag with index=97. All the rest are hidden. Even if only one data needs to be used in 100 lists, it will loop through the entire array.
ff6d136ddc5fdfeffaf53ff6ee95f185 04a018f18083b7a83936d439c5c53c8b{{item.name}}bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689Solution: Use computed
<ul> <li v-for="item in activeList">{{item.name}}</li> </ul> computed: { activeList() { return this.list.filter(val => { return val.actived; }); } },[Related recommendations:
vuejs video tutorial, web front-end development]
The above is the detailed content of What is the difference between v-if and v-for in vue. For more information, please follow other related articles on the PHP Chinese website!