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

Posted 2023-02-22

【中文标题】VueJS：<template> vs <div> 或相关的用于条件渲染的分组元素

【英文标题】：VueJS: <template> vs <div> or related for grouping elements for conditional rendering

【发布时间】：2019-01-30 10:11:04

【问题描述】：

在 Vue.js 中，如果您想通过 v-if/v-else-if 指令有条件地渲染多个元素，您可以将它们包装在 <template> 标记中并将指令应用于 <template> 标记，如 here 所述。但是，您也可以对包装多个元素的 <div> 标记执行相同的操作。 使用<template> 优于<div> 或任何其他类似的原生HTML5 标记是否有任何明显的性能优势？

【参考方案1】：

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

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

这是有效的：

<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>

【讨论】：

啊，我明白了。有条件渲染列表的例子是一个很棒的例子！