v-if和v-for写在同一标签上,谁的优先级高?为什么?怎么优化?
大家都知道v-for的优先级肯定是比v-if高的,那么有思考过同时用的话会导致什么问题吗?
当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时,这种优先级的机制会十分有用,如下:
javascript"><li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代码将只渲染未完成的 todo。
vue_13">但是这期间vue已经经历了先循环,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能,如果数据量多的话就会造成很大的问题
而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 ) 上。如:
javascript"><ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
如果你是要判断循环后的属性,那么可以先在循环前筛选数据先
javascript"><ul >
<li v-for="todo in todos.filter(item=>item.isRender)">
{{ todo }}
</li>
</ul>
这样的话就不会耗费性能了