Vue3：获取DOM对象、内置组件、过渡动画

获取 DOM 对象

通过 ref 获取元素。

获取一个 DOM 元素

在标签上通过 ref 属性来获取当前的 DOM 元素。

获取一组 DOM 元素

Fragment 根组件

减少标签层级，减少内容占用。
Vue3中，组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中。

teleport 组件

teleport 组件可以将指定组件渲染到应用外的其他位置。通过 to 属性进行移动，值写标签名（id值）。
例如：弹窗组件，他可能在任意组件中使用，但它不属于任何组件，所有不能在使用它的组件中渲染，我们需要将他渲染到指定位置。

Suspense 组件

当组件中的 setup 被写成异步函数的形式，代码执行顺序就变成了先渲染模板后执行setup函数了。
Suspense 用于确保组件中的 setup 函数调用和模板渲染之间的执行顺序。先执行 setup 后渲染模板。

1. 页面

2. 组件

通过 suspense 组件可以为异步操作添加等待提示效果。

过渡动画

vue 提供了 transition 组件实现过度动画，只需要使用 transition 组件包裹要执行动画的元素即可。

执行过渡动画的前提条件是元素具有创建与销毁的操作。

• 创建元素和销毁元素时，transition 组件会分别为执行动画的元素添加3个类名，我们可以通过这些类名为元素添加入场动画。
  | 创建元素动画类名 | 动画效果 |
  | — | — |
  | .v-enter-from | 元素执行动画初始样式 |
  | .v-enter-to | 元素执行动画的目标样式 |
  | .v-enter-active | 可以用于指定元素动画的类型 |

销毁元素动画类名	动画效果
.v-leave-from	元素执行动画初始样式
.v-leave-to	元素执行动画的目标样式
v-leave-active	可以用于指定元素动画的类型

• 注意：当页面有多个 **transition** 组件时，我们会给元素添加 **name** 属性来为不同的组件添加动画，类名将 **v-** 替换为 **name-** 来定义。