收集面试题：v-if和v-for哪个优先级更高？

思路分析：

1.先给出结论
2.为什么是这样，讲vue2和vue3在该方面的区别
3.什么情况可能使用，如何避免
4.总结

回答范例：

1. 实践中不应该把v-for和v-if放在同一个元素上
   

2. 在vue2中，v-for的优先级高于v-if，这意味着每次循环遍历都会进行一次v-if的判断，如果有1000次遍历，就会判断1000次v-if，影响性能；而在vue3中，v-if的优先级高于v-for，如果v-if的判断条件是v-for中的变量，则会导致变量未定义而报错。
   

3. 通常有两种情况会导致我们将v-for和v-if写在一个元素上：
   

• 为了筛选列表中的项目（例如 v-for="user in users" v-if="user.isActive" ）
  解决：通过计算属性筛选出activeUsers，替换users（例如users.filter(u=>u.isActive)）
• 为了避免一个本应该被隐藏的列表被渲染(例如 v-for="user in users" v-if="shouldShowUsers")。
  解决：把 v-if 移动至容器元素上 (比如 ul、ol)或者外面包一层template即可。
  

额外说明：情况一对于vue2和vue3都不可行；情况二对于vue2不可行，虽vue3中可行但却不建议

4. 总的来说，永远不要把 v-if 和 v-for 同时用在同一个元素上。

写在最后

努力准备面试题中，如有错误，欢迎指正