当前位置：首页 > news >正文

Vue3——Fragment

news 来源：原创 2025/8/21 15:34:11

文章目录

一、Fragment的核心意义
- 1. 解决Vue2的单根限制问题
- 2. 减少不必要的 DOM 嵌套
- 3. 语义化和结构化
二、Fragment 的实现原理
三、Fragment 使用方式
- 1. 基本用法
- 2. 结合条件渲染
- 3. 动态组件
四、实际应用场景
- 1. 列表/表格组件
- 2. 布局组件
- 3. 语义化标签
五、注意事项
- 1. 属性继承问题
- 2. 过渡动画的限制
- 3. 响应式数据
六、与其他框架对比
- 1. React 的 Fragment
- 2. Vue 2 的 <template> 标签
七、性能影响
八、总结

一、Fragment的核心意义

1. 解决Vue2的单根限制问题

Vue 2 的限制： 每个组件模板必须有且仅有一个根元素。若需要多个同级元素，必须用一个
或包裹，导致冗余的 DOM 层级。
Vue 3 的改进： 支持多根组件，直接在模板中编写多个根级元素，无需包裹容器。

2. 减少不必要的 DOM 嵌套

**示例: ** 在Vue2中，以下代码会报错：

<templete><h1>标题</h1><p>内容</p>
</templete>

必须改为：

<templete><div><h1>标题</h1><p>内容</p></div>
</templete>

Vue3的 Fragment: 直接允许上述写法（多根的写法），减少一层

，提升性能和代码简洁性

3. 语义化和结构化

严格 HTML 结构场景： 例如在<table>、<ul>等标签内部，直接渲染 <tr>、<li> 等子元素，避免包裹元素破坏语义。

二、Fragment 的实现原理

Vue 3 通过 虚拟 DOM 的改进 支持多根节点：

虚拟节点（VNode）的扁平化
Vue 3 的编译器会将多个根级元素编译为一个片段虚拟节点（Fragment VNode），在渲染时自动处理为同级 DOM 节点。
Patch算法的优化
Diff 算法能够识别并高效更新多个根节点，不会因多根结构导致性能下降。

三、Fragment 使用方式

1. 基本用法

直接在模板中编写多个根元素：

<template><h1>标题</h1><p>内容段落 1</p><p>内容段落 2</p>
</template>

2. 结合条件渲染

通过 v-if 和 v-else 控制多根元素的显示：

<template><div v-if="isLoading">加载中...</div><template v-else><DataChart /><DataTable /></template>
</template>

3. 动态组件

多根组件可以与 <component :is> 结合使用：

<template><ComponentA /><component :is="dynamicComponent" />
</template>

四、实际应用场景

1. 列表/表格组件

场景：渲染多个

或，无需包裹元素。
```

<template><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</template>
```
2. 布局组件

场景：并排显示侧边栏和主内容。
```

<template><Sidebar /><MainContent />
</template>
```
3. 语义化标签

场景：避免破坏 HTML 语义结构。
```
<template><header>页眉</header><main>主体内容</main><footer>页脚</footer>
</template>
```
五、注意事项

1. 属性继承问题
- 问题： 多根组件不会自动集成父组件传递的class、style 或自定义属性。
- 解决方案： 显示绑定 $attr 到特定子元素。
```
<template><ChildComponent v-bind="$attrs" /> <AnotherComponent />
</template>
```
2. 过渡动画的限制
- 问题： <transition> 或 <keep-alive> 需要单根元素才能生效。
- 解决方案： 包裹一层 <transition> 或改用 CSS 动画。
```
<template><transition><div v-if="show">单根元素</div></transition>
</template>
```
3. 响应式数据
- 问题： 多个根元素间共享响应式数据时，需通过 provide/inject 或全局状态管理（如 Pinia）。
```
<script setup>
import { ref, provide } from 'vue'const count = ref(0)
provide('count', count)
</script><template><ComponentA /><ComponentB />
</template>
```
六、与其他框架对比

1. React 的 Fragment
- 相似性： React 通过 <React.Fragment> 或 <>...</> 语法支持多根节点。
- 差异： Vue 3 的 Fragment 是隐式的，无需手动声明。
2. Vue 2 的标签
- Vue 2： 使用包裹多元素，但不会渲染为 DOM 节点。
- Vue 3： 直接支持多根元素，行为更直观。
七、性能影响
- 无额外开销： Fragment 在虚拟 DOM 层处理，不会增加实际 DOM 节点。
- 优化场景： 减少冗余的包裹元素，可能提升渲染性能。
八、总结

Vue 3 的 Fragment 特性通过支持多根组件，解决了 Vue 2 的单根限制问题，使代码更简洁、结构更灵活。它在以下场景中尤其有用：
- 需要严格 HTML 语义的结构（如表格、列表）。
- 减少冗余 DOM 层级以优化性能。
- 动态布局和条件渲染多元素。
  使用时需注意属性继承、过渡动画等细节，结合 Vue 3 的其他特性（如 v-bind=“$attrs”、provide/inject）可充分发挥其优势。

Vue3——Fragment

文章目录一、Fragment的核心意义1. 解决Vue2的单根限制问题2. 减少不必要的 DOM 嵌套3. 语义化和结构化二、Fragment 的实现原理三、Fragment 使用方式1. 基本用法2. 结合条件渲染3. 动态组件四、实际应用场景1. 列表/表格组件2. 布局组件3. 语义化标签五、注意事项1. 属性…...

编程日记 2025/8/21 15:34:11

Linux_16进程地址空间

CPU内的寄存器只有一套，但是CPU内寄存器的数据可能会有多份！ 一、程序地址空间下面这个图对应的是内存吗？（实际上是虚拟的进程地址空间） 32位机器内存最大为多少？ 32位操作系统的地址总线为32位&#x…...

编程日记 2025/8/18 13:49:50

职坐标机器学习编程实战：调试优化与自动化测试精要

内容概要在机器学习编程实践中，代码调试优化与自动化测试工具的应用是构建高可靠性系统的核心环节。本书聚焦从数据预处理到模型部署的全流程，通过特征工程优化、训练过程监控及持续集成方案的设计，系统化解决算法工程化中的典型问题。在特…...

编程日记 2025/8/18 13:12:07

git文件过大导致gitea仓库镜像推送失败问题解决（push failed: context deadline exceeded）

问题描述： 今天发现gitea仓库推送到某个镜像仓库的操作几个月前已经报错终止推送了，报错如下： 首先翻译报错提示可知是因为git仓库大小超过1G限制。检查本地.git文件，发现.git文件大小已达到1.13G。确定是.git文件过大导致&…...

编程日记 2025/8/16 12:29:58

llvm数据流分析

llvm数据流分析 1.数据流分析2.LLVM实现2.1.常量传播2.2.活跃性分析相关参考文档：DataFlowAnalysisIntro、ustc编译原理课程、南大程序分析课程1、南大程序分析课程2。 1.数据流分析数据流分析在编译优化等程序分析任务上都有重要应用。通常数据流分析可被抽象为…...

编程日记 2025/8/18 11:48:55

Vite为什么选用Rollup打包？

Vite 在生产阶段使用 Rollup 打包，但这不是唯一选择。它的设计背后有明确的权衡和考量，同时开发者也可以选择其他替代方案。一、为什么 Vite 默认使用 Rollup？ 1. Rollup 的核心优势 • Tree-shaking：Rollup 的静态分析能力极强&…...

编程日记 2025/8/21 15:29:38

Docker 入门与实战指南

Docker 入门与实战指南一、Docker 简介 Docker 是一个开源的容器化平台，允许开发者将应用程序及其依赖打包成一个可移植的容器。容器可以在任何安装了 Docker 的环境中运行，确保应用的一致性和可移植性。 1.1 为什么使用 Docker？ 环境一…...

编程日记 2025/8/16 9:54:39

C# 常用数据类型

C# 数据类型分为 ‌值类型‌、‌引用类型‌ 和 ‌特殊类型‌，以下是详细分类及对应范围/说明： 一、值类型（Value Types）‌ 值类型直接存储数据，分配在栈内存中，默认不可为 null。简单类型‌ 整数类型‌…...

编程日记 2025/8/21 15:30:35

深入解读 JavaScript 中 `this` 的指向机制：覆盖所有场景与底层原理

this 是 JavaScript 中最容易引发困惑的核心概念之一，它的指向在不同场景下呈现截然不同的行为。本文将系统性地解析 this 的所有使用场景，结合代码示例和底层原理，帮助你彻底掌握其运行机制。一、全局环境下的 this 1. 浏览器环境在浏览器…...

编程日记 2025/8/21 15:30:36

无人机全景应用解析与技术演进趋势

无人机全景应用解析与技术演进趋势 ——从立体安防到万物互联的空中革命一、现有应用场景全景解析 （一）公共安全领域 1. 立体安防体系空中哨兵：搭载 77 GHz 77\text{GHz} 77GHz毫米波雷达（探测距离 5 km 5\text{km} 5km&…...

编程日记 2025/8/21 15:32:43

手写简易Tomcat核心实现：深入理解Servlet容器原理

目录一、Tomcat概况 1. tomcat全局图 2.项目结构概览二、实现步骤详解 2.1 基础工具包（com.qcby.util） 2.1.1 ResponseUtil：HTTP响应生成工具 2.1.2 SearchClassUtil：类扫描工具 2.1.3 WebServlet：自定义注解…...

编程日记 2025/8/21 15:28:18

【音视频】ffmpeg命令提取像素格式

1、提取YUV数据提取yuv数据，并保持分辨率与原视频一致使用-pix_fmt或-pixel_format指定yuv格式提取数据，并保持原来的分辨率 ffmpeg -i music.mp4 -t "01:00" -pixel_format yuv420p music.yuv提取成功后，可以使用ffplay指定y…...

编程日记 2025/8/18 10:23:13

深度剖析Redis：双写一致性问题及解决方案全景解析

在高并发场景下，缓存与数据库的双写一致性是每个开发者必须直面的核心挑战。本文通过5大解决方案，带你彻底攻克这一技术难关！ 一、问题全景图：当缓存遇到数据库 1.1 典型问题场景 // 典型问题代码示例 public void updateProduc…...

编程日记 2025/8/21 15:29:37

Redis----大key、热key解决方案、脑裂问题

文章中相关知识点在往期已经更新过了，如果有友友不理解可翻看往期内容出现脑裂问题怎么保证集群还是高可用的什么是脑裂问题脑裂说的就是当我们的主节点没有挂，但是因为网络延迟较大，然后和主节点相连的哨兵通信较差，之后主…...

编程日记 2025/8/21 15:29:39

Android 调用c++报错 exception of type std::bad_alloc: std::bad_alloc

一、报错信息 terminating with uncaught exception of type std::bad_alloc: std::bad_alloc 查了那部分报错c++代码 szGridSize因为文件太大，初始化溢出了 pEGM->pData = new float[szGridSize]; 解决办法直接抛出异常，文件太大就失败吧最后还增加一个日志输出，给…...

编程日记 2025/8/21 15:24:27

【从零开始学习计算机科学】操作系统（五）处理器调度

【从零开始学习计算机科学】操作系统（五）处理器调度处理器调度一些简单的短程调度算法的思路先来先服务（First-Come-First-Served，FCFS）优先级调度及其变种最短作业优先调度算法（SJF）--非抢占式最短作业优先调度算法（SJF）--抢占式最高响应比优先调度算法轮转调度算法…...

编程日记 2025/8/21 15:34:10

LeetCode1871 跳跃游戏VII

LeetCode 跳跃游戏 IV：二进制字符串的跳跃问题题目描述给定一个下标从 0 开始的二进制字符串 s 和两个整数 minJump 和 maxJump。初始时，你位于下标 0 处（保证该位置为 0）。你需要判断是否能到达字符串的最后一个位置&#xf…...

编程日记 2025/8/19 21:03:26

ResNet50深度解析：原理、结构与PyTorch实现

ResNet50深度解析：原理、结构与PyTorch实现 1. 引言 ResNet（残差网络）是深度学习领域的一项重大突破，它巧妙解决了深层神经网络训练中的梯度消失/爆炸问题，使得构建和训练更深的网络成为可能。作为计算机视觉领域的里…...

编程日记 2025/8/21 15:32:42

MATLAB 控制系统设计与仿真 - 24

PID 控制器分析- 控制器的形式连续控制器的结构： 为滤波时间常数，这类PID控制器在MATLAB系统控制工具箱称为并联PID控制器，可由MATLAB提供的pid函数直接输入，格式为： 其他类型的控制器也可以由该函数直接输入&#x…...

编程日记 2025/8/21 15:22:40

数字IC后端设计实现教程 |Innovus ICC2 Routing Pin Access Setting设置方法

默认情况下routing 引擎可以在标准单元可以打孔的任何地方（via region）打孔，甚至工具还会先拉出一块metal，然后再打孔过渡到高层。随之工艺节点越做越小，标准单元内部的结构也越来越复杂。此时如果还沿用传统工艺的走…...

编程日记 2025/8/21 15:29:39

1、准备数据 -- drop drop table if exists dept; drop table if exists emp; drop table if exists salgrade;-- CREATE CREATE TABLE dept (deptno int NOT NULL COMMENT 部门编号,dname varchar(14) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMM…...

编程日记 2025/8/21 13:52:03

网络编程-----服务器（多路复用IO 和 TCP并发模型）

一、单循环服务器模型 1. 核心特征 while(1){newfd accept();recv();close(newfd);}2. 典型应用场景 HTTP短连接服务（早期Apache）CGI快速处理简单测试服务器 3. 综合代码 #include <stdio.h> #include <sys/types.h> /* See NO…...

编程日记 2025/8/21 15:32:44

GitHub 项目版本管理与 Release 发布流程记录

GitHub 项目版本管理与 Release 发布流程记录 1. 项目环境设置 1.1 打开 VS Code 并进入项目目录 E:\adb\Do>code .1.2 配置 Git 用户信息 E:\adb\Do>git config --global user.name "n" E:\adb\Do>git config --global user.email "**gmail.com&q…...

编程日记 2025/8/20 8:59:52

GStreamer —— 2.15、Windows下Qt加载GStreamer库后运行 - “播放教程 1：Playbin 使用“（附：完整源码）

运行效果介绍我们已经使用了这个元素，它能够构建一个完整的播放管道，而无需做太多工作。本教程介绍如何进一步自定义，以防其默认值不适合我们的特定需求。将学习： • 如何确定文件包含多少个流，以及如何切换其中。…...

编程日记 2025/8/21 15:30:35

Python+DeepSeek：开启AI编程新次元——从自动化到智能创造的实战指南

文章核心价值技术热点：结合全球最流行的编程语言与国产顶尖AI模型实用场景：覆盖代码开发/数据分析/办公自动化等高频需求流量密码：揭秘大模型在编程中的创造性应用目录结构环境搭建：5分钟快速接入DeepSeek场景一：AI辅助代码开发（智能补全+调试）场景二：数据分析超级助…...

编程日记 2025/8/21 15:32:43

使用OpenCV和MediaPipe库——驼背检测（姿态监控）

目录驼背检测的运用 1. 驾驶姿态与疲劳关联分析 2. 行业应用案例 1. 教育场景痛点分析 2. 智能教室系统架构代码实现思路 1. 初始化与配置 2. MediaPipe和摄像头设置 3. 主循环 4. 资源释放 RGB与BGR的区别一、本质区别二、OpenCV的特殊性内存结构示意图&…...

编程日记 2025/8/21 6:43:14

maven的项目构建

常用构建命令命令说明mvn clean清理编译结果（删掉target目录）mvn compile编译核心代码，生成target目录mvn test-compile编译测试代码，生成target目录mvn test执行测试方法mvn package打包，生成jar或war文件mvn insta…...

编程日记 2025/8/19 8:58:23

光电感知赋能智能未来灵途科技护航新质生产力发展

2024年《政府工作报告》将大力推进现代化产业体系建设，加快发展新质生产力作为首要工作任务。这是“新质生产力”首次出现在《政府工作报告》中。发展新质生产力具体包括新兴产业 ：推动商业航天、低空经济等新兴产业实现安全健康发展。未来产业 &a…...

编程日记 2025/8/21 15:26:22

文件上传靶场（10--20）

目录实验环境： 具体内容实现： 第十关（双写绕过）： 第十一关：（%00截断，此漏洞在5.2版本中） 正确用法错误用法思路： 操作过程： 第十二关…...

编程日记 2025/8/19 5:22:48

deepseek在pycharm中的配置和简单应用

对于最常用的调试python脚本开发环境pycharm，如何接入deepseek是我们窥探ai代码编写的第一步，熟悉起来总没坏处。 1、官网安装pycharm社区版（免费），如果需要安装专业版，需要另外找破解码。 2、安装Ollama…...

编程日记 2025/8/21 15:34:09

Linux 生成静态库

文章目录前提小知识生成和使用.a库操作步骤在应用程序中，有一些公共的代码需要反复使用的，可以把这些代码制作成“库文件”；在链接的步骤中，可以让链接器在“库文件”提取到我们需要使用到的代码，复制到生成的可执行…...

编程日记 2025/8/21 15:23:12

yolo-TensorRT相关代码逐步详解-pt转engine

基于TensorRT 的推论运行速度会比仅使用CPU 快40倍，提供精度INT8 和FP16 优化，支援TensorFlow、Caffe、Mxnet、Pytorch 等深度学习框架，其中Mxnet、Pytorch 需先转换为ONNX 格式。 TensorRT的构建流程大致分为几个步骤：创建构建器和网络、解析模型、配置构建参数、构建引擎…...

编程日记 2025/8/21 15:22:40

简记_ MCU管脚的防静电处理

一、分析（一） 接口处的信号要先过 ESD/TVS 管，然后拉到被保护器件； 建个 ESD 电路发生器的模型，代入到我们的电路中去分析： 继电器实现这两个“开关”，并且还会感应出一些额外的RLC寄生。 ES…...

编程日记 2025/8/21 15:24:28

C语言实现算法（二）

以下是 “10个不重复的C语言经典算法案例“，包含可运行代码、开发环境配置及系统要求。所有代码基于标准C语法，已在GCC 9.3.0环境下测试通过。开发环境配置编译器：GCC（推荐） Windows：安装 MinGW 或 Visual Studio Linux：sudo apt-get install gcc macOS：通过Xcode Co…...

编程日记 2025/8/21 15:26:21

transformer模型介绍——大语言模型 LLMBook 学习（二）

1. transformer模型 1.1 注意力机制 **注意力机制（Attention Mechanism）**在人工智能中的应用，实际上是对人类认知系统中的注意力机制的一种模拟。它主要模仿了人类在处理信息时的选择性注意（Selective Attention）&a…...

编程日记 2025/8/21 15:23:14

K8s 1.27.1 实战系列（十一）ConfigMap

ConfigMap 是 Kubernetes 中管理非敏感配置的核心资源，通过解耦应用与配置实现灵活性和可维护性。一、ConfigMap 的核心功能及优势 1、配置解耦将配置文件（如数据库地址、日志级别）与容器镜像分离，支持动态更新而无需重建镜像。 2、多形式注入环境变量：将键值…...

编程日记 2025/8/21 15:34:10

下降路径最⼩和（medium）

题目描述： 给你一个 n x n 的方形整数数组 matrix ，请你找出并返回通过 matrix 的下降路径的最小和。下降路径可以从第一行中的任何元素开始，并从每一行中选择一个元素。在下一行选择的元素和当前行所选元素最多相隔一列&#xff08…...

编程日记 2025/8/16 10:02:25

数据结构--【顺序表与链表】笔记

顺序表 template <class T> class arrList :public List<T> //表示 arrList 类以公有继承的方式继承自 List<T> 类 //公有继承意味着 List<T> 类的公共成员在 arrList 类中仍然是公共成员，受保护成员在 arrList 类中仍然是受保护成员。 { …...

编程日记 2025/8/17 12:31:14

使用AI一步一步实现若依前端(9)

功能9：退出登录功能功能8：页面权限控制功能7：路由全局前置守卫功能6：动态添加路由记录功能5：侧边栏菜单动态显示功能4：首页使用Layout布局功能3：点击登录按钮实现页面跳转功能2&#xf…...

编程日记 2025/8/17 21:27:59

Excel两列和依次相减

Excel实现左列依次行数的和减去右列依次行数的和： 举例：结余SUM(预付款)-SUM(开支) 公式：SUM($B$2:B2)-SUM($C$2:C2)...

编程日记 2025/8/16 11:48:40

智能合约中权限管理不当

权限管理不当 ： 权限管理不当是智能合约中常见的安全问题之一，尤其是在管理员或特定账户被过度赋予权限的情况下。如果合约中的关键功能，如转移资产、修改合约状态或升级合约逻辑，可以被未经授权的实体随意操作，这将构…...

编程日记 2025/8/16 11:23:57

Java糊涂包（Hutool）的安装教程并进行网络爬虫

Hutool的使用教程 1：在官网下载jar模块文件 Central Repository: cn/hutool/hutool-all/5.8.26https://repo1.maven.org/maven2/cn/hutool/hutool-all/5.8.26/ 下载后缀只用jar的文件 2：复制并到idea当中，右键这个模块点击增加到库 3&…...

编程日记 2025/8/19 16:48:51

ubuntu软件

视频软件，大部分的编码都能适应 sudo apt install vlc图片软件 sudo apt install gwenview截图软件 sudo apt install flameshot设置快捷键 flameshot flameshot gui -p /home/cyun/Pictures/flameshot也就是把它保存到一个自定义的路径菜单更换 sudo apt r…...

编程日记 2025/8/21 12:59:14

python高效试用17---两个字符串组成一个新的字符串和两个字符串组成元组作为key哪个更高效

在 Python 中，使用字符串连接 (str1 str2) 作为 key 和使用元组 ((str1, str2)) 作为 key 的效率差异，主要受以下因素影响： 哈希计算速度： 字符串连接 (str1 str2)：会创建一个新的字符串对象，并计算哈希…...

编程日记 2025/8/18 14:32:06

【C++模板】：开启泛型编程之门（函数模版，类模板）

📝前言： 在上一篇文章C内存管理中我们介绍了C的内存管理，重点介绍了与C语言的区别，以及new和delete。这篇文章我们将介绍C的利器——模板。在C编程世界里，模板是一项强大的特性，它为泛型编程奠定了坚实基础…...

编程日记 2025/8/20 9:38:14

华为eNSP:2.配置OSPF报文分析和验证

一、OSPF的5种数据包 Hello包：用于发现和维护邻居关系。定期发送，确保邻居路由器在线。数据库描述包（DBD, Database Description Packet）：在邻居关系建立后，用于交换链路状态数据库的摘要信息。链路状…...

编程日记 2025/8/18 3:03:40

一学就会的深度学习基础指令及操作步骤（3）模型训练验证

文章目录模型训练验证损失函数和优化器模型优化训练函数验证函数模型保存模型训练验证损失函数和优化器 loss_function nn.CrossEntropyLoss() # 损失函数 optimizer Adam(model.parameters()) # 优化器，优化参数模型优化获得模型所有的可训练参数&#x…...

编程日记 2025/8/18 12:25:18

【病毒分析】熊猫烧香病毒分析及其查杀修复

目录前言一、样本概况 1.1 样本信息 1.2 测试环境及工具 1.3 分析目标二、具体行为分析 2.1 主要行为 2.1.1 恶意程序对用户造成的危害 2.2 恶意代码分析 2.2.1 加固后的恶意代码树结构图(是否有加固) 2.2.2 恶意程序的代码分析片段三、解决方案(或总结) 3.1 …...

编程日记 2025/8/16 9:54:41

K8s 1.27.1 实战系列（九）Volume

一、Volume介绍 Volume 指的是存储卷，包含可被Pod中容器访问的数据目录。容器中的文件在磁盘上是临时存放的，当容器崩溃时文件会丢失，同时无法在多个Pod中共享文件，通过使用存储卷可以解决这两个问题。 1、Volume 的核心作用数据持久化与生命周期管理 Volume 的核心目标…...

编程日记 2025/8/19 18:14:01

火绒企业版V2.0全面支持Linux与国产化系统！免费试用助力国产化终端安全升级

国产化浪潮下的安全新挑战随着信创产业的加速推进，国产操作系统（统信UOS、麒麟OS等）和ARM架构服务器逐步成为政企核心业务的基础设施。然而，针对国产化系统的勒索攻击、网页篡改、供应链漏洞等威胁频发，传统安全方案…...

编程日记 2025/8/17 13:31:51

文章目录

一、Fragment的核心意义

1. 解决Vue2的单根限制问题

2. 减少不必要的 DOM 嵌套

3. 语义化和结构化

二、Fragment 的实现原理

三、Fragment 使用方式

1. 基本用法

2. 结合条件渲染

3. 动态组件

四、实际应用场景

1. 列表/表格组件

2. 布局组件

3. 语义化标签

五、注意事项

1. 属性继承问题

2. 过渡动画的限制

3. 响应式数据

六、与其他框架对比

1. ​React 的 Fragment

2. ​Vue 2 的 标签

七、性能影响

八、总结

相关文章：

1. React 的 Fragment

2. Vue 2 的标签