先给出答案肯定是v-for的优先级别高，原因是从两个方面说明
原因
1、实践出真知，自己写例子
<template>
<div id="app">
//两者同级
<div>
<p v-for="(item, index) in list" :key="index" v-if="isShow">
{{item.isFolder?item.name:''}}
</p>
</div>
<p>渲染函数：{{$options.render}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
list: [{
id: 0,
name: "app",
isFolder: true
},
{
id: 1,
name: "app1",
isFolder: false
}]
}
},
computed: {
isShow () {
return this.list && this.list.length > 0
}
}
}
</script>
两者同级渲染函数如下，先执行的列表渲染_l函数，每个条件里面再去判断_vm.isShow，性能不好
function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h return _c("div", { attrs: { id: "app" } }, [ _c( "div", _vm._l(_vm.list, function(item, index) {
return _vm.isShow ? _c("p", { key: index },
[ _vm._v( "\n " + _vm._s(item.isFolder ? item.name : "") + "\n " ) ]) : _vm._e() }), 0 ), _vm._v(" "),
_c("p", [_vm._v(_vm._s(_vm.$options.render))]) ])
}
<template>
<div id="app">
//两者不同级
<div v-if="isShow">
<p v-for="(item, index) in list" :key="index">
{{item.isFolder?item.name:''}}
</p>
</div>
<p>渲染函数：{{$options.render}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
list: [{
id: 0,
name: "app",
isFolder: true
},
{
id: 1,
name: "app1",
isFolder: false
}]
}
},
computed: {
isShow () {
return this.list && this.list.length > 0
}
}
}
</script>
两者不同级渲染函数如下，_vm.isShow 先判断条件，条件不通过直接返回空函数_vm._e()，不再去执行渲染列表
function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h return _c("div", { attrs: { id: "app" } }, [ _vm.isShow ? _c( "div", _vm._l(_vm.list, function(item, index) {
return _c("p", { key: index }, [ _vm._v( "\n " + _vm._s(item.isFolder ? item.name : "") + "\n " ) ]) }), 0 ) : _vm._e(), _vm._v(" "), _c("p", [_vm._v(_vm._s(_vm.$options.render))]) ]) }
2、vue源码，src/compiler/codegen/index.js 64行代码
很明显，先判断的for，在判断的if
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) {
/*先进入for语句*/
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
/*再进入if语句*/
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)
}
结论
- 显然v-for优先于v-if被解析，原因可以从以上两点出发解释
- 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
- 要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
- 优化：如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项
