Vue v-for 和 v-if

我发现其中有些不一致之处Vue文档。如果有人澄清这一点，请。看着v-for-with-v-if https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if它说这样做可能会有用。就我而言，我正处于这种情况。但现在eslint正在抱怨。

所以我看了看时尚指南 https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential它告诉我要避免这种情况。所以存在一些明显的矛盾。

Question: 真的有那么糟糕吗？你应该避免它吗？

我的想法: 我不认为这是bad。我有很多用例，这很有用。

Way 1:

所有节点都将在每次 items[] 更改时渲染

<span v-for="item in items" v-if="item.shouldRender">...</span>

Way 2:

所有节点都会渲染一次

<template v-for="item in items">
    <span v-if="item.shouldRender">...</span>
</template>

Way 3:

仅渲染过滤后的节点。过滤后的列表被缓存。

<span v-for="item in computedShouldRenderItems">...</span>

我认为“way-1”还不错。但我宁愿避免它。