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

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

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

v-if 应该移动外层元素
[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> -->
      <li v-if="isRenderList" v-for="item in list" :key="item.id">{{item.name}}</li>
  </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" } }, [
      "ul",
      _vm._l(_vm.list, function(item) {
        return _vm.isRenderList
          ? _c("li", { key: item.id }, [_vm._v(_vm._s(item.name))])
          : _vm._e()
      }),
可见 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))])
          }),
      : _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";
      });
                    v-if 和 v-for 哪个优先级更高？当使用v-for v-if写在同层的时候，会可能收到来自eslint-plugin-vue的两种提醒[vue/no-use-v-if-with-v-for] This ‘v-if’ should be moved to the wrapper element.eslint-plugin-vuev-if 应该移动外层元素[vue/no-use-v-if-with-v-for]The ‘list’ variable inside ‘v-for’ dir
					vue/no-use-v-if-with-v-for] The 'columns' variable inside 'v-for' directive should be replaced with




    

				假设有如下数组，需要将数组中的num渲染至页面中，同时遵循条件：对应的show值为true才渲染，为false就不渲染。
numArr: [
	{ num: 1, show: true },
	{ num: 2, show: false },
	{ num: 3, show: true },
	{ num: 4, show: true },
	{ num: 5, show: false },
	{ num: 6, show: true },
	{ num: 7, show: false },
	{ num:
[vue/no-use-v-if-with-v-for]
The 'menu' 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
				又是一个阳光明媚，风和日丽的周末，有人陪女神去逛街，有人陪女神去看电影，小编却默默的拿出电脑。哈哈哈，不是小编屌丝，女神正坐在旁边玩手机（感觉不是屌丝才怪）。
这两天小编重读了一遍vue2.0官网的风格指南，整理了这九条关键规则。
v-for设置键值
提到v-for需要设置键值，许多人第一反应会从diff算法的角度去讲原因，我更喜欢举一个例子来演示一下原因
假设有这样的一个页面，页面的列表是通过遍历数组得来的，如下图所示
示例代码如下
<!--模板部分-->
<div id="app
				Vue中使用v-for和v-if同时使用被语法检测到错误信息时（You should not mix ‘v-for’ with ‘v-if’）
v-for和v-if一起使用时会报错
提示错误：The ‘undefined’ variable inside ‘v-for’ directive should be replaced with a computed property that returns filtered array instead. You should not mix ‘v-for’ wi
				错误信息：The ‘undefined’ 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’
用了语法检测就要认这个邪，
直接看代码，报错的：
          class="productListBox"