v-if 和 v-for的优先级

1. vue2中v-if 和 v-for的优先级

v-for的优先级高于v-if。

v-for比v-if优先级高，所以每次执行v-for都会执行v-if，一起使用会浪费性能，不建议同时使用。
解决办法：
v-if写在v-for的前面一层。

  <div v-if="flag">
       <div v-for="item in list" :key="item.id">
          {{ item.id }} ---- {{ item.name }}
       </div>
   </div>

如果v-if依赖于v-for中的某一个数据，可以用computed计算属性和filter来实现。

 <div v-for="item in tempList" :key="item.id">
         {{ item.id }} ---- {{ item.name }}
  </div>

 data() {
      return {
        list: [
            {
                id: 1,
                name:'jjj',
                status: '1'
            },
            {
                id: 2,
                name:'kkk',
                status: '2'
            },
        ],
        flag: true
      }
    },
    computed: {
        tempList: function() {
            return this.list.filter((item, index)=> {
                return item.status === '1';
            })
        }

    }

2. vue3中v-if 和 v-for的优先级

v-if的优先级高于v-for。

那么是不是vue3中鼓励这样使用呢?当然不是,官方文档仍然不推荐同时使用。

 <div v-for="item in list" v-if="item.status" :key="item.id">
          {{ item.id }} ---- {{ item.name }}
   </div>
    data() {
      return {
        list: [
            {
                id: 1,
                name:'jjj',
                status: '1'
            },
            {
                id: 2,
                name:'kkk',
                status: '2'
            },
        ],
      }
    },

项目报错：

总结： 官方始终不推荐v-for和v-if同时使用，带来性能方面的浪费。如果必要的情况下，可以选择使用computed和filter过滤掉不需要显示的项目。