VueJS：<template> vs <div> 或相关的条件渲染分组元素

Question

在 Vue.js 中，如果你想通过 v-if/v-else-if 指令有条件地呈现多个元素，你可以将它们包装在 <template> 标签中并将指令应用于 <template>标签，如 here 所述。但是，您也可以用 <div> 标签包裹多个元素来做同样的事情。 与 <div> 或任何其他类似的原生 HTML5 标签相比，使用 <template> 是否有明显的性能优势？

Answer 1

我怀疑是否存在性能变化，但一个很大的区别是 <template> 节点 没有出现在 DOM.

这是一个重要的区别，尤其是在对作为其父项的唯一有效节点类型（例如列表项、table 行等）的子项进行分组时：

这是有效的：

<ul>
  <template v-if="something">
    <li>Text</li>
    <li>Text</li>
  </template>
</ul>

这不是：

<ul>
  <div v-if="something">
    <li>Text</li>
    <li>Text</li>
  </div>
</ul>

Answer 2

我知道这个问题很老了，但我又发现了一件事

如果您使用 divs - 您的 div 将在 DOM 中，但如果 v-if 是空的false 并且它可以使一些空间看起来像边距

如果您使用模板 - 您在 DOM 中没有任何内容，它只是不会出现

VueJS：<template> vs <div> 或相关的条件渲染分组元素

VueJS: <template> vs <div> or related for grouping elements for conditional rendering

vue.js

vuejs2

vue-directives