VUE3学习第五章 Teleport传送组件、keep-alive缓存组件、transition动画组件、transition-group过度、依赖注入Provide/Inject、兄弟组件Mitt

最新推荐文章于 2025-04-04 11:26:27 发布

原创

最新推荐文章于 2025-04-04 11:26:27 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #缓存 #javascript

本文介绍了Vue3的新特性Teleport的使用方法，包括不受父级样式影响和动态控制。接着讲解了keep-alive缓存组件，包括其生命周期、include/exclude/max属性及activated/deactivated钩子。详细阐述了transition动画组件的过渡类名、自定义动画和生命周期。还探讨了transition-group的列表过渡效果。最后，讨论了依赖注入Provide/Inject和兄弟组件间通信的多种方式，如Event Bus和Mitt。

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

一、Teleport传送组件

Teleport Vue 3.0新特性之一。

Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。

主要解决的问题因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响

1. 使用方法

通过to 属性插入指定元素位置 to=“body” 便可以将Teleport 内容传送到指定位置

<Teleport to="body">   // to 后面是啥  就传送到哪里去
    <Loading></Loading>
</Teleport>

也可以自定义传送位置支持 class id等选择器

	<div id="app"></div>
    <div class="modal"></div>

多个使用场景

<Teleport to=".modal1">
     <Loading></Loading>
</Teleport>
<Teleport to=".modal2">  //  class .modal   id #modal
     <Loading></Loading>
</Teleport>

动态控制teleport （disabled 属性）
使用disabled 设置为 true则 to属性不生效 false 则生效（默认 false）

    <teleport :disabled="true" to='body'>
      <A></A>
    </teleport>

二、keep-alive缓存组件

1. 内置组件keep-alive

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

开启keep-alive 生命周期的变化

初次进入时： onMounted> onActivated
退出后触发 deactivated
再次进入：
只会触发 onActivated
事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

<!-- 基本 -->   keep-alive 里面只能发 一个组件  多了会报错 v-if 除外
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
 
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

2. include 和 exclude、max

 <keep-alive :include="" :exclude="" :max=""></keep-alive>

include:
类型：字符串或者正则表达式
解释：只有名称匹配的组件会被缓存

exclude:
类型：字符串或者正则表达式
解释：任何名称匹配的组件都不会被缓存

max:
类型:数字
解释：最多可以缓存多少组件实例

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

3. 生命周期函数activated和deactivated

使用了 keep-alive 内置组件后组件会增加两个生命周期函数activated和deactivated
activated：当组件为活跃状态的时候触发(活跃状态：进入页面的时候)
deactivated：缓存状态的时候触发
如果没有使用 keep-alive 则不会有这两个生命周期函数

三、transition动画组件

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡:

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

自定义 transition 过度效果，你需要对transition组件的name属性自定义。并在css中写入对应的样式

1. 过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

#过渡 class
在进入/离开的过渡中，会有 6 个 class 切换。

v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。
v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被移除)，在过渡/动画完成之后移除。

例子：

	   <button @click='flag = !flag'>切换</button>
       <transition name='fade'>     // 这里   name 等于 fade
         <div v-if='flag' class="box"></div>
       </transition>

//开始过度
.fade-enter-from{
   
   
   background:red;
   width:0px;
   height:0px;
   transform:rotate(360deg)
}
//开始过度了
.fade-enter-active{
   
   
  transition: all 2.5s linear;
}
//过度完成
.fade-enter-to{
   
   
   background:yellow;
   width:200px;
   height:200px;
}
//离开的过度
.fade-leave-from{
   
   
  width:200px;
  height:200px;
  transform:rotate(360deg)
}
//离开中过度
.fade-leave-active{
   
   
  transition: all 1s linear;
}
//离开完成
.fade-leave-to{
   
   
  width