for循环的包装元素答案

【问题标题】：Wrapper element for for loopfor循环的包装元素
【发布时间】：2020-12-10 15:13:59
【问题描述】：

我目前正在通过尝试 Vuejs 来扩展我的视野。我正在使用来自我的 Vue 实例的数据创建导航，并且我有以下代码：

<ul class="nav">
    <li class="nav-item" v-for="navLink in navLinks" :key="navLink.id">
        <a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
    </li>
</ul>

现在，尽管这工作得很好，但我在视频中看到了以下两个示例：

<ul class="nav">
    <template v-for="navLink in navLinks">
        <li class="nav-item">
            <a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
        </li>
    </template>
</ul>

<ul class="nav">
    <div v-for="navLink in navLinks" :key="navLink.id">
        <li class="nav-item">
            <a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
        </li>
    </div>
</ul>

我在问自己，其中哪一个是最佳实践。

现在根据我所学到的，应该始终（如果可能）在 for 循环中设置 :key。这在标签上是不可能的，因此我认为这个选项更糟糕。

但是选项 3 和我的呢？有什么区别吗？只是个人喜好，还是有实际原因选择其中一个。

泰

【问题讨论】：

标签： vue.js

【解决方案1】：

我发现第一个和第三个选项之间的唯一区别是您将每个列表项包装在一个额外的 div 中。除非您想将此嵌套用于样式目的，否则您不需要这些包装器。

你的例子很好。只需确保用于键的 id 是唯一的。

同时避免在同一个元素上使用v-if 和v-for，而是在父元素上添加v-if

【讨论】：

【解决方案2】：

你的很好，它们确实都能正常工作，但第三个可能在自定义 css 方面存在问题，因为它是标签的包装器。

模板是一个替代方案，正如docs 中所述。

你已经在li标签上设置了key，只要你按照mantaining state with keys的指南，就可以了。

【讨论】：

【解决方案3】：

我认为您应该始终在 for 循环中放置 key 属性。

假设您对 ID 没有什么可处理的（某些 item.name 可能会重复？）只需使用这个：

<div v-for="(item, index) in items)" :key="index">
  {{ item.name }}
</div>

index 在这种情况下只是items 数组的索引。

【讨论】：

【解决方案4】：

所以你的将呈现为：

<ul class="nav">
    <li class="nav-item" :key="navLink.id">
        <a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
    </li>

    ...

    <li class="nav-item" :key="navLink.id">
        <a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
    </li>
</ul>

而第三个将是：

<ul class="nav">
    <div :key="navLink.id">
        <li class="nav-item">
            <a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
        </li>
    </div>

    ...

    <div :key="navLink.id">
        <li class="nav-item">
            <a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
        </li>
    </div>
</ul>

我会说将<li> 包裹在<div> 中有点冗长。

【讨论】：