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
    }
  ]
}