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>