Vue v-if 和 v-for 优先级

场景一：在同一个标签中使用 v-if 和 v-for

<div id="app">
    <p v-if="isShow" v-for="item in items">
        {{ item.title }}
    </p>
</div>

模版生成的render函数（可以通过app.$options.render来获取）

ƒ anonymous() {
  with (this) { return 
    _c('div', { attrs: { "id": "app" } }, 
    _l((items), function (item) 
    { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}
// `_l`是`vue`的列表渲染函数，函数内部都会进行一次`if`判断
// 结论：`v-for`优先级是比`v-if`高

场景二：将 v-if 放在 v-for 父级元素标签上

<div id="app">
    <template v-if="isShow">
        <p v-for="item in items">{{item.title}}</p>
    </template>
</div>

模版生成的render函数

ƒ anonymous() {
  with(this){return 
    _c('div',{attrs:{"id":"app"}},
    [(isShow)?[_v("\n"),
    _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}
// 此时是先进行判断，再进行列表的渲染

避免事项

1. 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
2. 如果条件判断是在循环外部，则在外层嵌套 template （页面渲染不生成 dom 节点），在这一层进行 v-if 判断，然后在内部进行 v-for 循环
3. 如果条件出现在循环内部，可通过计算属性 computed 提前过滤掉那些不需要显示的项