• 1. 实践中不应该把v-for和v-if放⼀起
• 2. 在vue2中，v-for的优先级是⾼于v-if，把它们放在⼀起，输出的渲染函数中可以看出会先执⾏循环再判断条 件，哪怕我们只渲染列表中⼀⼩部分元素，也得在每次重渲染的时候遍历整个列表，这会⽐较浪费；另外需要 注意的是在vue3中则完全相反，v-if的优先级⾼于v-for，所以v-if执⾏时，它调⽤的变量还不存在，就会导致 异常
• 3. 通常有两种情况下导致我们这样做：
  • 为了过滤列表中的项⽬ (⽐如 v-for="user in users" v-if="user.isActive" )。此时定义⼀个计 算属性 (⽐如 activeUsers )，让其返回过滤后的列表即可（⽐如 users.filter(u=>u.isActive) ）。
  • 为了避免渲染本应该被隐藏的列表 (⽐如 v-for="user in users" v-if="shouldShowUsers" )。此 时把 v- if 移动⾄容器元素上 (⽐如 ul 、 ol )或者外⾯包⼀层 template 即可。
• 4. ⽂档中明确指出永远不要把 v-if 和 v-for 同时⽤在同⼀个元素上，显然这是⼀个重要的注意事项。
• 5. 源码⾥⾯关于代码⽣成的部分，在属性处理的地方，能够清晰的看到是先处理v-if还是v-for，顺序上vue2和vue3正好相反，因此 产⽣了⼀些症状的不同，但是不管怎样都是不能把它们写在⼀起的。

确实用在一起时：

• vue2中v-for优先级高，编译时候，在遍历时，内部都会有一个三元表达式，开销大，性能低
• vue3中v-if优先级高，数据可能为空，直接报错

vue2、

vue3、