Vue3从入门到实践：深度了解新组件

朴灿烈づ我的快乐病毒、 2024-04-26 01:53 133阅读 0赞

### 1.Teleport ###

**概念：**Teleport（传送门）是一个新的特性，用于在DOM中的任意位置渲染组件。它允许你将组件的内容渲染到DOM中的另一个位置，而不受组件层次结构的限制。

下面举出例子解释：

**1.新建App.vue文件作为父组件**

![a77b8a2eeb0747988bdcd8fa0abd5a3f.png][]

**解析：这段代码的作用是创建一个外层容器，显示一个标题、一张图片，并包含一个自定义的模态框组件。**

**2.新建Modal.vue作为子组件**![8a1d86ef867d49d29d7baa28785b58a7.png][]

**解析：****这段代码是一个简单的Vue单文件组件，用于实现一个点击按钮展示模态框的功能。**

**展示：**

![12d01f73429d4163ab2b5f77ecae3639.png][]

**点击”展示窗口后“ 按钮后**

![4f5ae735c9654b00a6f93a3f1bbbb949.png][]

**这样看，你可能会认为窗口以父元素为参考，其实不然，而是整个视口**

**所以给你修改了一下窗口样式，使其更明显些**

![3d6a669bb51e4e879303764de43d39ad.png][]

![fa668e64147849e2baacaef603502805.png][]

**3. 此时我在父组件Css属性添加一个关于饱和度（filter）的属性**

![2333c3a802854498a5e7e1373ac9ae4e.png][]

![cdf3a3b953364c268bb7cbd292870461.png][]**4. 然后再点击”展示窗口“，你会发现窗口不能再参考视口了，而是父元素容器了。**

![47402e8c89d5478183a9ced9ce6649a4.png][]

**提醒：****这里父元素和窗口是包裹关系（父子组件嘛）**

![8b40e52c788049f1813890e51846f8f5.png][]

**所以这里强调的是父组件的某些属性会影响了窗口的（position: fixed），这时候可以引用Teleport了**

**5.在Modal.vue将模块放入到Teleport中**

![8adb0484d4a147eb8722238f6876c20b.png][]

![2f40771d5bd94abba4c236ecaf67a7b4.png][]

![1cd54b98b7984ace9e290a61cc476210.png][]**解析：以上代码使用了`<teleport>`元素将弹窗的内容传送到`body`元素中，使其在DOM结构中脱离当前组件的范围，可以在任何位置显示。**

**所以Teleport可以将子容器的div传送到指定的容器里面，同时里面的逻辑不影响，只是结构放出去了。所以你可以将Teleport称之为”传送门“**

**App.vue代码：**

<template>
    	<div class="outer">
    	  <h2>我是App组件</h2>
    	  <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
    	  <br>
    	  <Modal/>
    	</div>
      </template>
      
      <script setup lang="ts" name="App">
    	import Modal from "./Modal.vue";
      </script>
      
      <style>
    	.outer{
    	  background-color: #ddd;
    	  border-radius: 10px; 
    	  padding: 5px;
    	  box-shadow: 0 0 10px;
    	  width: 400px;
    	  height: 400px;
    	  filter: saturate(200%);
    	}
    	img {
    	  width: 270px;
    	}
      </style>

**Modal.vue代码：**

<template>
      <button @click="isShow = true">展示弹窗</button>
      <teleport to='body'>
        <div class="modal" v-show="isShow">
          <h2>我是弹窗的标题</h2>
          <p>我是弹窗的内容</p>
          <button @click="isShow = false">关闭弹窗</button>
        </div>
      </teleport>
    </template>
    
    <script setup lang="ts" name="Modal">
      import {ref} from 'vue'
      let isShow = ref(false)
    </script>
    
    <style scoped>
      .modal {
        width: 200px;
        height: 150px;
        background-color: skyblue;
        border-radius: 10px;
        padding: 5px;
        box-shadow: 0 0 5px;
        text-align: center;
        position: fixed;
        left: 50%;
        top: 20px;
        margin-left: -100px;
      }
    </style>

--------------------

### 2. Suspense ###

**概念：**

> **当我们在Vue 3中使用Suspense（悬挂）时，我们可以处理异步组件的加载状态和错误处理，以提供更好的用户体验。**
> 
> **想象一下，当一个组件需要一些时间来加载时，我们可以使用Suspense来展示一个等待状态，比如显示一个加载指示器或一个骨架屏，告诉用户正在加载中。一旦组件加载完成，它会被正常地显示出来。**
> 
> **另一方面，如果加载出现错误，Suspense可以帮助我们捕获这些错误并展示错误信息或备用内容。**
> 
> **所以，Suspense提供了一种在异步组件加载过程中处理加载状态和错误的方式，以确保用户能够知道正在发生的情况，并提供适当的反馈。通过使用Suspense，我们可以创建更流畅和友好的用户界面，提升用户体验。**

*  等待异步组件时渲染一些额外内容，让应用有更好的用户体验
 *  使用步骤：
    
     *  异步引入组件
     *  使用`Suspense`包裹组件，并配置好`default` 与 `fallback`

import { defineAsyncComponent,Suspense } from "vue";
    const Child = defineAsyncComponent(()=>import('./Child.vue'))

新建App.vue文件

![d431ac171eb640759faf00e991eab513.png][]

新建Child.vue文件：

![98eda9a3bfdd43d588af722f76acc9a6.png][]

在以上代码中，使用了`await`关键字来等待axios库发送GET请求并获取响应结果。**这是因为发送网络请求是一个异步操作，需要等待服务器返回响应后才能获取到数据。**

使用`await`关键字可以暂停代码的执行，直到异步操作完成并返回结果。在这个例子中，`await`关键字用于等待axios库发送GET请求并获取到服务器的响应结果。

通过使用`await`，可以确保在继续执行后续代码之前，已经获取到了API返回的数据。这样可以避免在数据还未返回时对未定义的数据进行操作。

![49f4d9bea1c74bb996eeb84e88335926.png][] 为什么呢？

在Vue的模板渲染过程中，当数据发生变化时，Vue会重新渲染模板以反映最新的数据状态。然而，在这段代码中，由于异步操作在初始化时就被执行，并且直接修改了`sum`的值，这会触发组件的重新渲染。

由于异步操作的执行时间是不确定的，可能会在组件的初始化阶段之后才完成，所以在组件初始化时，`sum`的初始值被渲染到模板中。然而，当异步操作完成后，`sum`的值被修改，导致组件重新渲染，此时没有提供标题的相关模板，因此导致标题消失。

如何解决呢？

![3e301fffed144a6b9350c3cff223e85c.png][]

在你提供的代码中，使用了`<Suspense>`组件来包裹异步加载的子组件`<Child/>`。

在`<template v-slot:default>`中，放置了实际的异步组件`<Child/>`。这表示在异步组件加载完成后，将显示`<Child/>`组件的内容。

`<template v-slot:fallback>`是一个占位内容，用于在子组件加载过程中显示。

你可以在这里放置一个加载状态的提示文本，例如`<h2>加载中......</h2>`。这段代码会在子组件加载完成之前显示，并在加载完成后被替换为`<Child/>`组件的内容。

通过使用`<Suspense>`组件和插槽（slot）的方式，你可以在异步加载的过程中提供一个加载状态的占位内容，以提升用户体验并避免页面显示空白。

![b3d148a809b2470f86c28f30c60309ca.png][]![43ab1d48be2849fe89865759e5fe3243.png][] **App.vue代码：**

<template>
      <div class="app">
        <h2>我是App组件</h2>
        <Suspense>
          <template v-slot:default>
            <Child/>
          </template>
          <template v-slot:fallback>
             <h2>加载中......</h2> 
           </template>
        </Suspense>
      </div>
    </template>
    <script setup lang="ts" name="App">
      import {Suspense} from 'vue'
      import Child from './Child.vue'
    </script>
    
    <style>
      .app {
        background-color: #ddd;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
      }
    </style>

**Child.vue代码：**

<template>
      <div class="child">
        <h2>我是Child组件</h2>
        <h3>当前求和为：{
       { sum }}</h3>
      </div>
    </template>
    
    <script setup lang="ts">
      import {ref} from 'vue'
      import axios from 'axios'
    
      let sum = ref(0)
      let {data:{content}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
      console.log(content)
    
    </script>
    
    <style scoped>
      .child {
        background-color: skyblue;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
      }
    </style>

--------------------

### 3.全局API转移到应用对象 ###

**概念：**

> **在Vue 3中，许多全局API的使用方式有所变化。以前，你可能会在Vue构造函数上调用这些API，但现在你需要使用应用对象来访问它们。**
> 
> **想象一下，Vue应用程序就像是一个实际的应用。在Vue 2中，你可以直接从"Vue"这个大总管那里获取所有的全局功能，就像向一个人提出请求一样。但在Vue 3中，这些功能被放在了应用对象中，就像是应用程序的各个部分，你需要通过应用对象来访问它们。**

**简而言之：以前需要Vue.xxx ，现在只需要app.xxx，时代变了，哥们。**

**`app.component`** ：**表示可以在全局使用的组件**

1.现在创建一个组件：Hello.vue

![6c4baeb8e61b4a6d9b7292adc03f53f8.png][]

**2.在main.ts引用导入**

![aed97b1dbb3d4319af2067332efa73da.png][]**3. 现在已经作为全局变量了，现在直接在两个组件中使用**

![8bc97afa092c4b9ebad957c5792a1866.png][]

**展示：**

![2b496610788d4dec87c0c01c50193e1a.png][]

--------------------

**`app.config：`**用于访问应用程序的全局配置对象。它提供了一种设置和访问全局配置选项的方式。

比如下面使用app.config.globalProperties可变为全局属性

**1.在main.ts引入**

![e42bb11cf7ee414a8e9f20be0d1949c2.png][]

**2.可以使用了，比如我在两个其他组件使用**

![a5763a25075a4464904b1bcbd25b8ed7.png][] 有报错，是我的编译器问题，可不必理会。

**3.展示**

![eb4b2bf705a24e988cfc21b312341688.png][]

--------------------

**`app.directive:`**用于注册全局指令。

![e9c1e888dd2f4091affbf65abb2b70a9.png][]

--------------------

`app.mount：`是Vue.js中用于将应用程序挂载到特定元素上的方法

![e95c7290dbd6476699fdf14175852b7c.png][]

**`app.unmount：卸载`**特定元素上的方法

![a5b2ebd3d9474fe7b29f44de55deef3f.png][]![a771bacd722f4e26b810716aebb2862e.png][]**2s后整个页面卸载** ![83b3d9d0aea640b0803bc0279f5e85a8.png][]

--------------------

**`app.use` ：用于安装插件，常用的有路由器（Router）或者状态管理器（Pinia）**

![3dd68dc497384404872a8ef553851b2b.png][]

--------------------

### 4.vue3的部分非兼容性改变 ###

概念：其实就是Vue3的部分规则，在Vue2中不能这样写了。

*  **过渡类名 `v-enter` 修改为 `v-enter-from`、过渡类名 `v-leave` 修改为 `v-leave-from`。**

*  **`keyCode` 作为 `v-on` 修饰符的支持。**
 *  **`v-model` 指令在组件上的使用已经被重新设计，替换掉了 `v-bind.sync。`**
 *  **`v-if` 和 `v-for` 在同一个元素身上使用时的优先级发生了变化。**
 *  **移除了`$on`、`$off` 和 `$once` 实例方法。**
 *  **移除了过滤器 `filter`。**
 *  **移除了`$children` 实例 `propert`。**

建议去看官网，这是面试常问到的。

--------------------

**总结：**

1.  **Teleport（传送门）**是Vue 3中的一个新特性，它允许你将组件的内容渲染到DOM中的任意位置，而不受组件层次结构的限制。通过使用`<teleport>`元素和`to`属性，你可以将组件的内容传送到指定的DOM元素中，从而实现灵活的渲染位置。
2.  **Suspense（悬挂）**是Vue 3中用于处理异步组件加载状态和错误处理的特性。它允许你在异步组件加载过程中展示等待状态（如加载指示器或骨架屏），并处理加载错误。通过使用`<Suspense>`组件，你可以提供更好的用户体验，确保用户在等待加载时能够获得适当的反馈。
3.  **在Vue 3中，许多全局API已经从Vue构造函数转移到应用对象上。**这是为了提供更模块化和可配置的应用程序结构。原先通过`Vue.directive`、`Vue.mixin`等方式注册全局指令、混入等，现在需要使用应用对象（通过`createApp`函数创建）上的方法进行注册，例如`app.directive`、`app.mixin`等。
4.  **Vue 3引入了一些非兼容性的改变，这意味着在从Vue 2升级到Vue 3时，一些代码可能需要进行修改才能正常工作。**其中一些改变包括更严格的模板编译、Composition API的引入、组件实例属性的更改等。为了平滑升级到Vue 3，官方提供了一些工具和指南，帮助开发者进行代码迁移和适配。需要仔细阅读Vue 3的官方文档和迁移指南，以了解这些非兼容性的改变并相应地修改代码。

[a77b8a2eeb0747988bdcd8fa0abd5a3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3b9827ca3bac4116b517e04e5851229c.png
[8a1d86ef867d49d29d7baa28785b58a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/43a3026fb6c541e9887ca759fc302409.png
[12d01f73429d4163ab2b5f77ecae3639.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/377919c512c8425c92c0c9ea829f1a11.png
[4f5ae735c9654b00a6f93a3f1bbbb949.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/581275d60d1a4c968fa2e2ed0353d474.png
[3d6a669bb51e4e879303764de43d39ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/603f6cffa2974bcd9589c36ff822cfb7.png
[fa668e64147849e2baacaef603502805.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/733a8fc589fa4f48b31894722b4ebeae.png
[2333c3a802854498a5e7e1373ac9ae4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4e257bb5279a40b69f2e9677daa737c0.png
[cdf3a3b953364c268bb7cbd292870461.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/50822bdff7884deb8025e1736ff20fab.png
[47402e8c89d5478183a9ced9ce6649a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/2637bfdc3bfb4c2f8c2da3752a9b3492.png
[8b40e52c788049f1813890e51846f8f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5bfecb116d434504854a374b1ba82816.png
[8adb0484d4a147eb8722238f6876c20b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f1100501704146d8ba156d7ccd9732d6.png
[2f40771d5bd94abba4c236ecaf67a7b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/278601622ee44d118403d394a6fe3353.png
[1cd54b98b7984ace9e290a61cc476210.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9ec37395e2d34792b6816ae96ebb3999.png
[d431ac171eb640759faf00e991eab513.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e3eb9e89629a47fabd966a2b6c1251dd.png
[98eda9a3bfdd43d588af722f76acc9a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/91e506a5590046dcb1854978870d10d8.png
[49f4d9bea1c74bb996eeb84e88335926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5596f72398f647ceb599adbb368ac0e9.png
[3e301fffed144a6b9350c3cff223e85c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/454fd3b621f348ba9521acfe5426ee3e.png
[b3d148a809b2470f86c28f30c60309ca.png]: https://img-blog.csdnimg.cn/direct/b3d148a809b2470f86c28f30c60309ca.png
[43ab1d48be2849fe89865759e5fe3243.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8f14bd471ea34779afdbacea5a4882b6.png
[6c4baeb8e61b4a6d9b7292adc03f53f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6cff35788b0241d482495cf89cc838f7.png
[aed97b1dbb3d4319af2067332efa73da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d5f7841aac8b4c4f97b5c2cddfaf297c.png
[8bc97afa092c4b9ebad957c5792a1866.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/626ac0a08bd04516bbdcfed2b2427a5e.png
[2b496610788d4dec87c0c01c50193e1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ebc44f2f6a1d4670b4c6075aca83f2af.png
[e42bb11cf7ee414a8e9f20be0d1949c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0d4267c09cd64ffa8d58df04b197447f.png
[a5763a25075a4464904b1bcbd25b8ed7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6448478403f342a28199d28e7cc619fe.png
[eb4b2bf705a24e988cfc21b312341688.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/dd6a10708dda4b5fad78f2f8a69cfffc.png
[e9c1e888dd2f4091affbf65abb2b70a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0e99e1e32f6e4db3884c4a6b2af748cd.png
[e95c7290dbd6476699fdf14175852b7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e1ce6d27d4504c6b9b8d55992f9ada80.png
[a5b2ebd3d9474fe7b29f44de55deef3f.png]: https://img-blog.csdnimg.cn/direct/a5b2ebd3d9474fe7b29f44de55deef3f.png
[a771bacd722f4e26b810716aebb2862e.png]: https://img-blog.csdnimg.cn/direct/a771bacd722f4e26b810716aebb2862e.png
[83b3d9d0aea640b0803bc0279f5e85a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/afb6b14fb3bc45b187407cb6e27d1e93.png
[3dd68dc497384404872a8ef553851b2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/23a4c0b2d61f4347812dab46529fa8f9.png