vue 源码学习之 面试那些事 ---- v-if 和 v-for 谁的优先级更高

问题： v-if 和 v-for 哪一个优先级更高？ 若是两个同时出现，应该怎么优化获得更好的性能？

首先，对于这个熟悉又陌生的问题，咱们本身会有属于本身的答案。

固然呢， 我此次想要从一个更加深刻的角度去探索，这个缘由究竟是怎么样的？

//测试代码：
//在同一个：
<div v-for="(index,item) in xxxx"  v-if="condition"></div>

//嵌套关系：
<div v-if="condition">
   <div v-for="(index,item) in xxxx" ></div>
</div>

// 咱们能够在vue 的github 库中，找到对应的目录下的代码

// 具体位置：  compiler/codegen/index.js:64

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)
    // once
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
    // for 
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)
    // if
  } 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)
  }

因此呢，首先咱们在源码中能够很明显的看到 v-for 的优先级是高于 v-if ； 其次呢，若是二者同时出现的话，每次渲染的时候都会先执行循环再判断条件，不管如何 循环是不可避免的，浪费了性能 最后呢， 要避免出现这种状况，则在外层 嵌套 template, 在这一层进行 if 判断，而后呢在内部进行 v-for 的 循环。

固然若是出现下面这种状况，咱们要作的就是 先过滤出须要显示的部分，而后将过滤出来的部分， 在进行渲染 ， 执行判断到 执行循环

<template>
  <div v-if="isFolder">
    <p v-for="child in children">{child.title}</p>
  </div>
</template>

<script>
export default {
  const app = new Vue({
    el: '#demo',
    data() {
      return {
        children:[{
          title: 'cvvn',show: 'true'
        },
        {
          title: 'cvvn2',show: 'false'
        },
        ]
      }
    },
    computed: {
      isFolder() {
        return this.children.length > 0 && this.children.show !== false;
      }
    },
  })
}
</script>