v-if 和 v-for 哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能？

v-if 和 v-for 哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能？

Author rise created on 2020/1/20

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

• 为什么?
  举例:v-for="item in list" v-if="!item.checked" 这段代码,如果if先执行很显然是拿不到item这个值的, 所以需要先执行v-for循环,先拿到item 再交给v-if

优化, 一般有两种常见的情况

• 过滤一个列表中的某些项
  • 实现: 将要过滤的列表交给计算属性computed去处理,得到一个过滤后的列表再进行渲染
  • 优点: 只渲染有效列，渲染更高效，解耦渲染层逻辑，可维护性更强
• 判断整个列表是否显示
  • 实现: v-if放置在v-for外层容器元素上(例如:ul,ol,div,还可以是