vue3跟vue2,v-if跟v-for同时使用区别
vue2 版本
v-if与v-for同时使用,v-for优先级最高。为什么?因为源码这么写。。
先遍历,在判断,有些不显示的节点遍历时不必要的,浪费性能。不建议同时使用。
vue2.6.14 源码位置 vue\src\compiler\codegen\index.js
在56行 genElement函数内
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 {
...
}
}
vue3 版本
在此版本调整了优先级,v-if 比v-for优先级高
开发者为了防止我们同时使用两个指令产生性能问题
vue3.3.4 源码位置 core\packages\compiler-core\src\compile.ts
在27行 getBaseTransformPreset函数内
export function getBaseTransformPreset(
prefixIdentifiers?: boolean
): TransformPreset {
return [
[ //transformif同时使用,性能问题,先判断if
transformOnce,
transformIf,
transformMemo,
transformFor,
...(__COMPAT__ ? [transformFilter] : []),
...(!__BROWSER__ && prefixIdentifiers
? [
// order is important
trackVForSlotScopes,
transformExpression
]
: __BROWSER__ && __DEV__
? [transformExpression]
: []),
transformSlotOutlet,
transformElement,
trackSlotScopes,
transformText
],
{
on: transformOn,
bind: transformBind,
model: transformModel
}
]
}