先給出答案肯定是v-for的優(yōu)先級(jí)別高躺同，原因是從兩個(gè)方面說(shuō)明
原因
1阁猜、實(shí)踐出真知，自己寫例子
<template>
<div id="app">
//兩者同級(jí)
<div>
<p v-for="(item, index) in list" :key="index" v-if="isShow">
{{item.isFolder?item.name:''}}
</p>
</div>
<p>渲染函數(shù)：{{$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>
兩者同級(jí)渲染函數(shù)如下蹋艺，先執(zhí)行的列表渲染_l函數(shù)剃袍，每個(gè)條件里面再去判斷_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">
//兩者不同級(jí)
<div v-if="isShow">
<p v-for="(item, index) in list" :key="index">
{{item.isFolder?item.name:''}}
</p>
</div>
<p>渲染函數(shù)：{{$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>
兩者不同級(jí)渲染函數(shù)如下捎谨，_vm.isShow 先判斷條件民效，條件不通過(guò)直接返回空函數(shù)_vm._e()，不再去執(zhí)行渲染列表
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) {
/*先進(jìn)入for語(yǔ)句*/
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
/*再進(jìn)入if語(yǔ)句*/
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)
}
結(jié)論
- 顯然v-for優(yōu)先于v-if被解析舒萎，原因可以從以上兩點(diǎn)出發(fā)解釋
- 如果同時(shí)出現(xiàn)，每次渲染都會(huì)先執(zhí)行循環(huán)再判斷條件蹭沛，無(wú)論如何循環(huán)都不可避免臂寝，浪費(fèi)了性能
- 要避免出現(xiàn)這種情況章鲤，則在外層嵌套template，在這一層進(jìn)行v-if判斷咆贬，然后在內(nèi)部進(jìn)行v-for循環(huán)
- 優(yōu)化：如果條件出現(xiàn)在循環(huán)內(nèi)部败徊，可通過(guò)計(jì)算屬性提前過(guò)濾掉那些不需要顯示的項(xiàng)
