2024-07-16 记录vue内置组件（ps：内容来自GPT）

1. Transition 和 TransitionGroup

• 用途：用于为单个元素或组件提供过渡效果。TransitionGroup则用于列表中的多个元素或组件的过渡效果。
• 特点：
  • Transition：只影响单个元素或组件，不会额外渲染DOM元素。
  • TransitionGroup：渲染一个真实的DOM元素（默认为<span>），可以通过tag属性改变渲染的元素类型。支持列表的排序和移动动画。
• Vue 3中的改进：在Vue 3中，Transition和TransitionGroup的使用方式和Vue 2相似，但Vue 3的Composition API为它们提供了更多的灵活性。

2. KeepAlive

• 用途：用于缓存不活动的组件实例，而不是销毁它们。这对于需要频繁切换但不需要重新渲染的组件特别有用，可以提高性能。
• 特点：
  • 包裹动态组件时，会缓存不活动的组件实例。
  • 支持include、exclude和max属性来控制哪些组件被缓存以及缓存的数量。

3. Teleport

• 用途：Vue 3中新增的组件，用于将其插槽内容渲染到DOM中的另一个位置。这对于需要将子组件渲染到父组件之外的DOM元素中非常有用，比如模态框、下拉菜单等。
• 特点：
  • 使用to属性指定内容应该被渲染到的DOM位置。
  • 支持disabled属性来禁用Teleport功能，将内容渲染在原位置。

4. Suspense

• 用途：Vue 3中新增的组件，用于处理异步组件的加载。它允许在等待一个异步组件时显示一个占位内容，并在组件加载完成后自动切换。
• 特点：
  • 支持#default和#fallback插槽，分别用于显示加载完成的内容和加载中的占位内容。
  • 可以设置timeout、onPending、onResolve和onFallback等选项来更细粒度地控制异步加载过程。

5. Fragment（Vue 3特有）

• 用途：在Vue 3中，Fragment允许组件返回多个根节点，解决了Vue 2中单个根元素的限制。
• 特点：
  • 无需额外的包裹元素，可以直接返回多个根节点。
  • 提高了组件的灵活性和可维护性。

6. 其他

• Component：用于渲染一个“元组件”为动态组件，根据is属性的值来决定渲染哪个组件。
• Slot：用于内容分发，是组件模板中的占位符，可以被父组件的模板内容替换。