同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
在 Vue3 中 v-if 的优先级高于 v-for，这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：
<!--
这会抛出一个错误，因为属性 todo 此时
没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>在外新包装一层 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：
防止循环可以采取计算属性，或者使用 v-for 循环时，使用计算属性或方法来过滤数据。
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>- 在 Vue2 中解析时，先解析 v-for 在解析 v-if。会导致先循环后在对每一项进行判断，浪费性能。
