vue if和for能一起用么,为什么避免v-if和v-for用在一起
本文主要介绍面试官：为什么Vue中的v-if和v-for不建议一起使用？本文通过示例代码对其进行了非常详细的介绍，对大家的学习或工作都有一定的参考价值。有需要的朋友可以和下面的边肖一起学习。
本文主要介绍为什么不建议v-if和v-for一起使用。分享给大家，如下：
一、作用
v-if指令用于有条件地呈现一段内容。只有当指令的表达式返回真值时，才会呈现这段内容。
v-for指令基于数组呈现一个列表。v-for指令需要items中item形式的特殊语法，其中items是源数据数组或对象，item是迭代数组元素的别名。
在v-for中，建议设置键值，保证每个键值都是唯一的，便于diff算法的优化。
两者都在使用中。
情态动词-if=isShow /
Li v-for= items中的项目:key=item.id
{{ item.label }}
/李
二、优先级
V-if和v-for都是vue模板系统中的指令。
当vue模板被编译时，指令系统将被转换成可执行的渲染函数。
例子
写一个P标签，同时使用v-if和v-for。
div id=应用程序
p v-if= is show v-for= items中的项目
{{ item.title }}
/p
/div
创建vue实例来存储isShow和项目的数据。
const app=new Vue({
埃尔： #app ，
data() {
返回{
项目：[
{ title: foo }，
{标题：巴兹 }]
}
},
计算值：{
isShow() {
返回this.items this.items.length 0
}
}
})
模板的代码会在render函数中生成，可以通过app获取。$options.render
匿名(){
用(这个){ return
_c(div ，{ attrs: { id: app } }，
_l((项目)，函数(项目)
{ return (isShow)？_c(p ，[_ v( \ n _ s(item . title) \ n )):_ e()})，0) }
}
_l是vue的列表渲染函数，在函数内部会进行一次if判断。
初步结论是v-for的优先级高于v-if。
然后把v-for和v-if放在不同的标签上。
div id=应用程序
模板v-if=isShow
p v-for= items { item . title } }/p
/模板
/div
然后输出渲染函数。
匿名(){
用(这个){return
_c(div ，{attrs:{id:app}}，
[(isShow)？[_v(\n )，
_l((items)，function(item){return _c(p ，[_v(_s(item.title))])})]:_e()]，2)}
}
这时我们可以看到，当v-for和v-if作用于不同的标签时，是先判断，再渲染列表。
让我们再检查一下vue源代码。
源代码：\ vue-dev \ src \ compiler \ codegen \ index . js
导出函数gen element(El:as element，state: CodegenState): string {
if (el.parent) {
el.pre=el.pre el.parent.pre
}
if (el.staticRoot！el.staticProcessed) {
返回发电机静态(el，状态)
} else if (el.once！el.onceProcessed) {
返回genOnce(el，state)
} else if (el.for！el.forProcessed) {
返回genFor(el，state)
} else if (el.if！el.ifProcessed) {
返回genIf(el，state)
} else if (el.tag===template ！艾尔.斯洛塔吉特。state.pre) {
返回genChildren(el，state) void 0
} else if (el.tag===slot) {
返回genSlot(el，state)
}否则{
//组件或元素
.
}
判断if时，v-for先判断v-if。
结论：v-for的优先级高于v-if。
三、注意事项
千万不要在同一个元素上同时使用v-if和v-for，这样会导致性能的浪费(每次渲染都会在做条件判断之前循环)
如果避免这种情况，模板嵌套在外层(页面渲染不生成dom节点)，在这一层进行v-if判断，然后在内部进行v-for循环。
模板v-if=isShow
p v-for=项目中的项目
/模板
如果条件出现在循环内部，您可以通过计算computed属性来过滤掉那些不需要提前显示的项目。
计算值：{
items: function() {
return this . list . filter(function(item){
返回item.isShow
})
}
}
参考文献
https://vue3js.cn/docs/zh\
关于为什么Vue中的v-if和v-for不建议一起使用，本文到此结束。关于v-if和v-for不建议一起使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。