2020-07-27

demo如下：

image.png

同级渲染时，函数如下

image.png

先循环再渲染，也就是说v-for的优先级高于v-if ，这意味着v-if将分别运行于每个v-for中 造成了重复浪费。
当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

image.png

两者不同级时：

image.png

1、显然v-for优先于v-if被解析）
2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3、要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
4、如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项