Vue3 个人对<template>标签的理解

小孙258
1,952 阅读2分钟

使用vite写一个SFC，注意到了到这个<template>标签

MDN: HTML 内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。 将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 <template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

  • 这个标签是HTML5规范的

结合MDN给出的例子来看，其作用是在HTML文件中创建一个内容模板，这个内容模板并不会被渲染，可以在DOM上找到这个节点，nodeType是11。目的是方便用js写一些重复的内容，比如：

做一个可以增加行的表格

  1. 做一个单行表格的内容模板
  2. 获取内容模板后可以直接实例化表格模板为其插入内容
  3. 克隆内容模板，作为新行添加到表格上。

  • 使用只读的content属性访问节点的DocumentFragment

DocumentFragment是一个没有父对象的最小文档对象，nodeType是1。它被作为一个轻量版的Document使用，就像标准的document一样，存储由节点组成的文档结构。与document相比，最大的区别是DocumentFragment不是真实DOM树的一部分，它的变化不会触发回流，且不会导致性能等问题)。

在上文举的例子中克隆内容模板时克隆的就是内容模板的DocumentFragment。

  • <template>在vue中的使用

在Vue中，如果不希望使用v-for时循环出过多的

，可以嵌套使用 <template> 使用前：

<template>
  <div v-for="person in persons" >
    <div>
      {{ person.id }} - {{ person.name }} - {{ person.skill }}
    </div>
  </div>
</template>

image.png

使用后：

<template>
  <template v-for="person in persons">
    <div>
      {{ person.id }} - {{ person.name }} - {{ person.skill }}
    </div>
  </template>
</template>

image.png

好看了许多同时节点树减少了，不也挺好的吗？

  • 个人理解：Vue对<template>的处理

单个SFC文件中只能有一个<template>，嵌套的<template>并没有影响Vue。

在访问一个嵌套了子<template>的父<template>的content属性时，我们得到的是里面包有子<template>的父DocumentFragment，，将这个加入DOM是是没有意义的，因为子<template>的内容不会被渲染。

个人猜到，Vue在处理<template>使用了递归的方法去解析其内容，保证子<template>的内容能够被渲染。

以上，感谢您的阅读，咱很乐意与大家交流，希望摩多摩多指出咱的问题 谢谢力(^w^)

请指导我们.jpg

avatar
文章
阅读
粉丝