一文完整指南Vue3内置组件的使用

平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“一文详细解析Vue3内置组件的采用”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

前言：

在这个场景下，vue3作为当前主流的前端框架之一，其内置组件体系为开发者提供了高效、灵活的解决方案。这些组件不仅简化了常用功能的开发流程，还借助组合式API和性能优化进一步提升开发体验。

实际处理时，建议借助官方文档拿到最准确的信息，避免第三方解读带来的偏差。官方资源通常包含最新更新和完整细节，确保学习内容的权威性。官网地址：vue3内置组件

1.

实际处理时，熟悉css动画的就能够看出这跟过渡动画有关，官网也说明了它能够为单个元素或组件提供动画过渡的效果。它能够将进入和离开动画应用到借助默认插槽传递给它的元素或组件上进入或离开能够由以下的条件之一触发：

• 由v-if触发
• 由v-show触发
• 由特殊元素切换的动态组件
• 改变特殊的key属性

结合项目来看，这就是官网上面的一个例子，点击按钮文字隐藏，但它不是直接隐藏的，而是opacity的值从1到0经过了0.5s，所以用户看到的是文字慢慢的在消失，样式中.v-enter-active等是什么意思呢？官网这边给了一张图就很好理解了。

Enter表示进入，Leave表示离开。

落到代码里，v-enter-from表示进入动画的起始状态，配合上面的例子就很好理解了，开始起始状态的透明度为0，到进入动画的结束状态也就是v-enter-to的透明度变为1，这个过程就是v-enter-active，所以我们需在这个过程中设置动画时间以及过渡的速度，就比如上面设置的ease表示从快到慢过渡。理解了进入，离开也就同理了。

结合项目来看，但了解这个还远远不够，也无法应对项目中的所有场景，当我们的项目中需多个transition内置组件同时它们的动画效果不同时，因此需给每个transition组件定义一个名字，好将它们区分开来，避免样式混淆，只需在transition内置组件上添加一个name属性，给它一个名称，代码如下所示：

    
      
hello

    

结合项目来看，进入动画与结束动画的类名也要进行修改，只需将v替换成我们设置的过渡效果名：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

2.

实际处理时，用来对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

在这个场景下，内置组件和内置组件一样都是添加动画效果，拥有相同的props和特定的CSS class选择器以及相同的JavaScript钩子函数，它们的区别如下所示：

• 结合项目来看，默认情况下，它不会渲染一个容器元素。但你能够借助传入 tag prop来指定一个元素作为容器元素来渲染。
• 过渡模式在这里不可用，因为我们不再实在互斥的元素之间进行切换。
• 列表中的每个元素都必须有一个独一无二的 key attribute。
• CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。
• 实际处理时，用作与列表，用作于单个元素。

示例：

落到代码里，tag='ul'时，会将其渲染为ul标签，所以能够在其添加li标签列表。

添加动画样式

.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

从实现思路看，我们往数据前面添加数据时，下面的数据会有一个像“让位置”的操作，但这个动作有点僵硬，所以能够采用.v-move给其添加动画效果。

从实现思路看，但是当我们删除数据时，下面的数据会在上面的数据删除后立马向上去“占位置”，当我们也希望这样有一个过渡的动画效果时，就需在.list-leave-active中添加position: absolute;，就是需在离开的过程中，让其脱离文档流，这样做的原因是便于浏览器正确的计算移动的动画。

.list-leave-active{
  position: absolute;
}

3.

它的功能是在多个组件间动态切换时缓存被移除的组件实例.

理解这一步时，包裹动态组件时，会缓存不活跃的组件实例，而不是去销毁它们。

理解这一步时，任何时候都只能有一个活跃组件实例作为的直接子节点。

落到代码里，一个组件在中被切换时，它的activated和deactivated生命周期钩子将被调用，这两个生命周期是特有的，用来替代mounted和unmounted。这适用来的直接子节点及其所有子孙节点。

基本采用

当我点击复选框时，会进行组件的切换

home:

User:

在这个场景下，当我们在home组件中点击按钮会增加数据的值，但切换到User组件再切回到home组件中时，组件会被从新渲染，所以原本添加的值会回到初始值，但有些场景下我们不需组件从新渲染，希望将其缓存起来，就能够采用到了，方法很轻松，只需用包裹需切换的组件即可。

现在，在组件切换时状态也能被保留了。

包含/排除

在这个场景下，因为默认会缓存内部的所有组件实例，可能有些情况下我们不需包含的所有组件实例都被缓存，能够借助 包含（include）和 排除（exclude）落到代码里，prop来定制该行为。这两个prop的值都能够是一个以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

这样它就只会缓存home组件。

在这个场景下，在 Vue3.2.34 或以上的版本里，采用