v-if和v-for写在同一标签上，谁的优先级高？为什么？怎么优化？

v-if和v-for写在同一标签上，谁的优先级高？为什么？怎么优化？

大家都知道v-for的优先级肯定是比v-if高的，那么有思考过同时用的话会导致什么问题吗？

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>

上面的代码将只渲染未完成的 todo。

但是这期间vue已经经历了先循环，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能，如果数据量多的话就会造成很大的问题

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 ) 上。如：

<ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p>

如果你是要判断循环后的属性，那么可以先在循环前筛选数据先

<ul > <li v-for="todo in todos.filter(item=>item.isRender)"> {{ todo }} </li> </ul>

这样的话就不会耗费性能了