Vue中v-for和v-if優先級（2、3）

Vue2

在Vue2當中,v-for優先級要優于v-if,也就是說，當它倆同時沿用時，v-for先遍歷，v-if再判斷。

Vue2源碼位置

\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...
}

Vue3

在Vue3當中，v-if優先級要大于v-for,也就是說，當循環和判斷同時在一個節點時，那么先判斷再遍歷。

總結

因為這種風格上的差異，所以盡量不要在一個子節點同時使用v-for和v-if。