v-for和v-if优先级

源码位置vue/src/complier/codegen/index.js

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

在处于同一节点的时候，v-for 优先级比 v-if 高。
这意味着 v-if 将分别重复运行于每个 v-for 循环中。
即——先运行v-for 的循环，然后在每一个v-for 的循环中，
再进行 v-if 的条件对比。所以，不推荐v-if和v-for同时使用。

vue中的内置指令都有相应的解析函数，执行顺序是通过简单的
if else-if语法来确定的。在genFor的函数里，
最后会return一个自运行函数，再次调用genElement。

虽然v-for和v-if可以放一起，
但我们要避免这种写法，在官网中也有明确指出，这会造成性能浪费。

第三种方案

在外侧嵌套一层template,判断v-if，再在里面v-for循环

第一种方案

<template v-for="(item, index) in list" :key="index">	
   <div v-if="item.isShow">{{item.title}}</div>
</template>

第二种方案

计算属性(推荐使用)

<template>
 <div>
	<div v-for="(user,index) in activeUsers" :key="user.index" >
		{{ user.name }} 
	</div>
</div>
</template>
<script>
export default {
  name:'A',
  data () {
    return {
      users: [{name: 'aaa',isShow: true}, 
              {name: 'bbb',isShow: false}]
    };
  },
  computed: {//通过计算属性过滤掉列表中不需要显示的项目
	activeUsers: function () {
	  return this.users.filter(function (user) {
		return user.isShow;//返回isShow=true的项，添加到activeUsers数组
	  })
	}
  }
};
</script>