- 源碼中找答案 https://github.com/vuejs/vue/blob/dev/src/compiler/codegen/index.js
在處理AST的時候，會先看靜態(tài)節(jié)點，再看once，之后處理for，這里for會優(yōu)先于if處理，所以代碼生成的時候for會在if的前面
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
let code
if (el.component) {
code = genComponent(el.component, el, state)
} else {
let data
if (!el.plain || (el.pre && state.maybeComponent(el))) {
data = genData(el, state)
}
const children = el.inlineTemplate ? null : genChildren(el, state, true)
code = `_c('${el.tag}'${
data ? `,${data}` : '' // data
}${
children ? `,${children}` : '' // children
})`
}
// module transforms
for (let i = 0; i < state.transforms.length; i++) {
code = state.transforms[i](el, code)
}
return code
}
}
- 做個測試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue事件處理</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<h1>v-for和v-if誰的優(yōu)先級高？應(yīng)該如何正確使用避免性能問題？</h1>
<!-- <p v-for="child in children" v-if="isFolder">{{child.title}}</p> -->
<template v-if="isFolder">
<p v-for="child in children">{{child.title}}</p>
</template>
</div>
<script>
//創(chuàng)建實例
let vm = new Vue({
el:"#demo",
data(){
return {
children:[
{
title:"Aaron"
},
{
title:"Brown"
}
]
}
},
computed:{
isFolder(){
return this.children && this.children.length > 0;
}
}
});
console.log(vm.$options.render);
</script>
</body>
</html>
兩者同級時渲染函數(shù)如下
(function anonymous() {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if誰的優(yōu)先級高？應(yīng)該如何正確使用避免性能問題？")]),_v(" "),
_l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()})],2)}
})
_l包含了isFolder的條件判斷
兩者不同級時渲染函數(shù)如下
(function anonymous() {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if誰的優(yōu)先級高？應(yīng)該如何正確使用避免性能問題？")]),_v(" "),
(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
})
先判斷了條件再看是否執(zhí)行_l
結(jié)論：
1.顯然v-for的優(yōu)先級高于v-if
2.如果同時出現(xiàn)，每次渲染都會先執(zhí)行循環(huán)在判斷條件，無論如何循環(huán)都不可避免，浪費了性能（不推薦同時使用）
3.要避免這種情況，則在外層嵌套template，在這一層進行v-if判斷，然后在內(nèi)部進行v-for循環(huán)
