难度级别：初级及以上                                 提问概率：50% 

在初学者看来，v-for和v-if同时使用是非常方便的，二者共同使用的常见场景有两种。例如有两个列表，分别用于渲染学生数据和老师数据，然后有两个单选按钮，用于切换当前页面中需要展示学生列表还是老师列表，这个时候用v-if进行判断就非常方便，代码如下

Vue代码：
<template>
    <ul>
        <li v-for="item in studentData" v-if="type='student'"></li>
    </ul>
</template>
<script>
    export default {
        data() {
            return {
                type: 'teacher',
                // 仅用于示例讲解，学生数据可自行添加
                studentData: []
            }
        }
    }
</script>

 还有一种场景，例如在循环学生列表的同时添加筛选项，只展示成绩大于等于60分的学生数据，这个时候v-for和v-if同时使用也是非常方便的，代码如下

Vue代码：
<template>
    <ul>
        <li v-for="item in studentData" v-if="item.score >= 60"></li>
    </ul>
</template>
<script>
    export default {
        data() {
            return {
                // 仅用于示例讲解，学生数据可自行添加
                studentData: []
            }
        }
    }
</script>

虽然使用方便，但Vue官方文档明确指出，v-for和v-if这两个指令同时作用域同一元素时，Vue2版本中，v-for的优先级更高，Vue3版本中，修改为v-if的优先级更高。那么这就导致在第一个场景中，v-for已经开始循环渲染数据了，紧接着type值如果判断为不是student，列表又会快速被隐藏；而在第二个场景中，v-if需要用到score属性的时候，很可能会因为属性不存在而导致程序报错。

结合这一特性，面对第一个场景，我们可以在v-for元素的外层添加template标签，在template标签上使用v-if指令，这样就可以使v-if的执行总是早于v-for；面对第二个场景，我们可以使用computed计算属性将studentData的数据提前进行过滤，这样就可以规避掉同时使用v-for和v-if指令了。不过在大多数项目开发中，studentData数据很可能是通过接口获取到的，这个时候可以在接口返回数据后进行数据过滤。

刷题思考

    在Vue项目中，v-for和v-if几乎是最常用的两个指令，本题的重点在于回答出二者在Vue2和Vue3中优先级的区别，只要把优先级掌握了，相信很快就能发现项目代码中可以优化的地方，稍加练习，回答这道题还不是轻轻松松。

类似考点

    这一小节考察了常用的Vue指令，但需要注意的是，面试官绝对不会仅仅只是问Vue的一些简单用法，更有可能会借助常用指令和方法来考察深层次的知识点，所以面试官还会问这些问题，例如请你说一说v-if和v-show有什么区别吗？例如请你说一说v-html会存在哪些问题？例如你知道v-model和v-bind有什么区别吗？