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

先给出答案肯定是v-for的优先级别高，原因是从两个方面说明

原因

1、实践出真知，自己写例子

<template>
  <div id="app">
    //两者同级
    <div>
      <p  v-for="(item, index) in list" :key="index" v-if="isShow">
        {{item.isFolder?item.name:''}}
      </p>
    </div>
    <p>渲染函数：{{$options.render}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      list: [{
        id: 0,
        name: "app",
        isFolder: true
      },
      {
        id: 1,
        name: "app1",
        isFolder: false
      }]
    }
  },
  computed: {
    isShow () {
      return this.list && this.list.length > 0
    }
  }
}
</script>

两者同级渲染函数如下，先执行的列表渲染_l函数，每个条件里面再去判断_vm.isShow，性能不好

function() { 
  var _vm = this 
  var _h = _vm.$createElement 
  var _c = _vm._self._c || _h return _c("div", { attrs: { id: "app" } }, [ _c( "div", _vm._l(_vm.list, function(item, index) { 
  return _vm.isShow ? _c("p", { key: index },
   [ _vm._v( "\n " + _vm._s(item.isFolder ? item.name : "") + "\n " ) ]) : _vm._e() }), 0 ), _vm._v(" "), 
  _c("p", [_vm._v(_vm._s(_vm.$options.render))]) ]) 
}

<template>
  <div id="app">
    //两者不同级
    <div  v-if="isShow">
      <p  v-for="(item, index) in list" :key="index">
        {{item.isFolder?item.name:''}}
      </p>
    </div>
    <p>渲染函数：{{$options.render}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      list: [{
        id: 0,
        name: "app",
        isFolder: true
      },
      {
        id: 1,
        name: "app1",
        isFolder: false
      }]
    }
  },
  computed: {
    isShow () {
      return this.list && this.list.length > 0
    }
  }
}
</script>

两者不同级渲染函数如下，_vm.isShow 先判断条件，条件不通过直接返回空函数_vm._e()，不再去执行渲染列表

function() { 
 var _vm = this 
 var _h = _vm.$createElement 
 var _c = _vm._self._c || _h return _c("div", { attrs: { id: "app" } }, [ _vm.isShow ? _c( "div", _vm._l(_vm.list, function(item, index) { 
return _c("p", { key: index }, [ _vm._v( "\n " + _vm._s(item.isFolder ? item.name : "") + "\n " ) ]) }), 0 ) : _vm._e(), _vm._v(" "), _c("p", [_vm._v(_vm._s(_vm.$options.render))]) ]) }

2、vue源码，src/compiler/codegen/index.js 64行代码

很明显，先判断的for，在判断的if

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) {
   /*先进入for语句*/
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
  /*再进入if语句*/
    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)
  }

结论

1. 显然v-for优先于v-if被解析，原因可以从以上两点出发解释
2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3. 要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
4. 优化：如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项