九、【Vue3】——新的组件（Fragment&Teleport&Suspense）

最新推荐文章于 2025-03-09 09:06:46 发布

YIFEI132

最新推荐文章于 2025-03-09 09:06:46 发布

阅读量469

点赞数

分类专栏： Vue3 文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.youkuaiyun.com/yifei1234567/article/details/124016042

版权

本文介绍了Vue3的三个新组件：Fragment允许组件无根标签，减少内存占用；Teleport提供将组件html结构移动到指定位置的能力；Suspense用于在等待异步组件时渲染额外内容，提升用户体验。此外，还提到了Vue3中全局API的变化和其他改进，如data选项变为函数，过渡类名和事件修饰符的调整，以及过滤器的移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：Vue3更新了一些新的组件比较有亮点Fragment、Teleport、Suspense，还有一些其他变化。下面具体分析下如何炫酷的使用。

Fragment

在Vue2中: 组件必须有一个根标签
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

好处: 减少标签层级, 减小内存占用

<template>
  <!-- Vue3组件模版结构中可以没有根标签，内部会将多个标签包裹在一个fragment虚拟元素中 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <h1>Welcome to Your Vue.js App</h1>
  <h2>名称：{
    {name}}</h2>
  <h2>年龄：{
    {age}}</h2>
  <button @click="handleClick">点击</button>
  <button @click="test">测试vue2</button>
</template>