v-if 和 v-for 哪个优先级更高？如果同时出现，应该怎么优化得到更好的性能？

v-for 的优先级比 v-if 要高。在同级使用时，从两者编译后生成的的渲染函数来看，会先执行循环创建的逻辑，在每次循环时根据三元表达式进行判断逻辑；这显然很不合理。在不同级时，先使用计算属性进行过滤。

优化方式：可以先进行逻辑判断，再进行循环。避免性能问题。

在vue源码： src\compiler\codegen\index.js 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 {
    // 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
  }
}

我们可以看到，genFor 的处理顺序时优先于 genIf 的。会影响渲染函数的处理结果。

1. 显然 v-for 优先于 v-if 被解析
2. 如果同时常出现，每次渲染都会先执行循环再判断条件，会造成性能浪费。
3. 要避免这种情况，则在外层嵌套 template，在这一层进行 v-if 怕毛短，然后在内部进行 v-for 循环。
4. 如果需要对循环的数据进行过滤判断，可以在循环的内部层级再进行逻辑判断；更好的方式是使用计算属性，先对循环的数据进行过滤，再进行循环，达到更好的性能。