v-if 和 v-for 谁的优先级高？

1、v-for 的优先级是高于v-if 的

我们查看下vue源码 ，源码位置：\vue-dev\src\compiler\codegen\index.js

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

在进行if判断的时候，v-for是比v-if先进行判断

最终结论：v-for优先级比v-if高

注意事项

1. 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
2. 如果两者同时出现的话，那每次循环都会执行v-if，会很浪费性能，我们正确的做法应该是再v-for的外面新增一个模板标签template，在template上使用v-if

<div>
	<template v-if="isShow">
		<p v-for="item in list">
	</template>
</div>
<script>
export default {
  name: "Home",
  components: {},
  data () {
    return {
      list:[
         { title: "foo" },
         { title: "baz" }
      ]
    }
  },
  computed: { 
  	isShow() { 
  		return this.items && this.items.length > 0 
  	}
  }
};
</script>

3. 如果在循环内部进行if判断，我们可以先用computed过滤出有效的展示数据，再进行渲染，如下：