v-if和v-for哪个优先级更高【Vue从源码找答案（一）】

v-if 和 v-for 哪个优先级更高？

来自 eslint-plugin-vue 的两种提醒

当使用v-for v-if写在同层的时候，会可能收到来自eslint-plugin-vue的两种提醒

1. [vue/no-use-v-if-with-v-for] This 'v-if' should be moved to the wrapper element.eslint-plugin-vue

   v-if 应该移动外层元素

2. [vue/no-use-v-if-with-v-for] The 'list' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue

   v-for 列表内容的判断应该通过 computed 返回 filtered 数组代替，不能混合使用 'v-for' 和 'v-if'

  //这种写法是不推荐的
  <li  v-for="item in list"  v-if="item.type==='cat'" :key="item.id">{{item.name}}</li>

写在同层

为什么会有这两种提醒呢，这就跟Vue对v-for和v-if的执行时序有关

先来做个测试

<template>
  <div id="app"> 
     <!-- <ul v-if="isRenderList">
      <li v-for="item in list" :key="item.id">{{item.name}}</li>
    </ul> -->
    <ul>
      <li v-if="isRenderList" v-for="item in list" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isRenderList: true,
      list: [
        { id: 1, type: "cat", name: "喵喵1" },
        { id: 2, type: "cat", name: "喵喵2" },
        { id: 3, type: "dog", name: "汪汪1" },
        { id: 4, type: "dog", name: "汪汪2" },
        { id: 5, type: "cat", name: "喵喵1" },
        { id: 6, type: "cat", name: "喵喵1" },
        { id: 7, type: "cat", name: "喵喵1" },
        { id: 8, type: "cat", name: "喵喵1" },
        { id: 9, type: "cat", name: "喵喵1" }
      ]
    };
  },
  beforeCreate() {
    console.log(this.$options.render);
  }
};
</script>

template 中的内容最终都会处理成 render 函数

我们来看 beforeCreate 的时候打印的 render 函数长啥样的

两者同级的时候渲染函数如下

// _vm._l 是渲染列表相关的函数  
render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", { attrs: { id: "app" } }, [
    _c(
      "ul",
      _vm._l(_vm.list, function(item) {
        return _vm.isRenderList
          ? _c("li", { key: item.id }, [_vm._v(_vm._s(item.name))])
          : _vm._e()
      }),
      0
    )
  ])
}

可见 v-for 和 v-if 同级的时候，v-for 的优先级更高，在渲染函数中的处理先进行 list 的循环渲染，内层再判断是否渲染

两者不同级的时候渲染函数如下：

render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", { attrs: { id: "app" } }, [
    _vm.isRenderList
      ? _c(
          "ul",
          _vm._l(_vm.list, function(item) {
            return _c("li", { key: item.id }, [_vm._v(_vm._s(item.name))])
          }),
          0
        )
      : _vm._e()
  ])
}

而当 v-if 与 v-for 不同级的时候会先进行 _vm.isRenderList 判断再进 _vm._l 渲染

由上面可知

• Vue 会解析 v-for 再解析 v-if

• 两者同时出现的时候，内层每一层都会进行判断，性能欠佳

• eslint-plugin-vue 给出优化的提示

  1. 在外层进行 v-if 判断，然后在内部进行v-for循环

  2. 如果在内层出现条件判断，则可以使用计算属性返回一个筛选过的数组

computed: {
    catList() {
      return this.list.filter(item => {
        return item.type === "cat";
      });
    }
  }

本文使用 mdnice 排版