-
Vue3从入门到实践：深度了解新组件
1.Teleport
概念：Teleport（传送门）是一个新的特性，用于在DOM中的任意位置渲染组件。它允许你将组件的内容渲染到DOM中的另一个位置，而不受组件层次结构的限制。
下面举出例子解释：
1.新建App.vue文件作为父组件
解析：这段代码的作用是创建一个外层容器，显示一个标题、一张图片，并包含一个自定义的模态框组件。
2.新建Modal.vue作为子组件
解析：这段代码是一个简单的Vue单文件组件，用于实现一个点击按钮展示模态框的功能。
展示：
点击”展示窗口后“ 按钮后
这样看，你可能会认为窗口以父元素为参考，其实不然，而是整个视口
所以给你修改了一下窗口样式，使其更明显些
3. 此时我在父组件Css属性添加一个关于饱和度（filter）的属性
4. 然后再点击”展示窗口“，你会发现窗口不能再参考视口了，而是父元素容器了。
提醒：这里父元素和窗口是包裹关系（父子组件嘛）
所以这里强调的是父组件的某些属性会影响了窗口的（position: fixed），这时候可以引用Teleport了
5.在Modal.vue将模块放入到Teleport中
解析：以上代码使用了body元素中，使其在DOM结构中脱离当前组件的范围，可以在任何位置显示。所以Teleport可以将子容器的div传送到指定的容器里面，同时里面的逻辑不影响，只是结构放出去了。所以你可以将Teleport称之为”传送门“
App.vue代码：
- <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代码：
- <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>
- <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文件
新建Child.vue文件：
在以上代码中，使用了
await关键字来等待axios库发送GET请求并获取响应结果。这是因为发送网络请求是一个异步操作，需要等待服务器返回响应后才能获取到数据。使用
await关键字可以暂停代码的执行，直到异步操作完成并返回结果。在这个例子中，await关键字用于等待axios库发送GET请求并获取到服务器的响应结果。通过使用
await，可以确保在继续执行后续代码之前，已经获取到了API返回的数据。这样可以避免在数据还未返回时对未定义的数据进行操作。
为什么呢？在Vue的模板渲染过程中，当数据发生变化时，Vue会重新渲染模板以反映最新的数据状态。然而，在这段代码中，由于异步操作在初始化时就被执行，并且直接修改了
sum的值，这会触发组件的重新渲染。由于异步操作的执行时间是不确定的，可能会在组件的初始化阶段之后才完成，所以在组件初始化时，
sum的初始值被渲染到模板中。然而，当异步操作完成后，sum的值被修改，导致组件重新渲染，此时没有提供标题的相关模板，因此导致标题消失。如何解决呢？
在你提供的代码中，使用了
在
中，放置了实际的异步组件是一个占位内容，用于在子组件加载过程中显示。你可以在这里放置一个加载状态的提示文本，例如
加载中......
通过使用
App.vue代码：- <div class="app">
- <h2>我是App组件h2>
- <Suspense>
- <template v-slot:default>
- <Child/>
- template>
- <template v-slot:fallback>
- <h2>加载中......h2>
- template>
- Suspense>
- div>
- <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代码：
- <div class="child">
- <h2>我是Child组件h2>
- <h3>当前求和为：{{ sum }}h3>
- div>
- <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
2.在main.ts引用导入
3. 现在已经作为全局变量了，现在直接在两个组件中使用
展示：
app.config：用于访问应用程序的全局配置对象。它提供了一种设置和访问全局配置选项的方式。比如下面使用app.config.globalProperties可变为全局属性
1.在main.ts引入
2.可以使用了，比如我在两个其他组件使用
有报错，是我的编译器问题，可不必理会。3.展示
app.directive:用于注册全局指令。
app.mount：是Vue.js中用于将应用程序挂载到特定元素上的方法
app.unmount：卸载特定元素上的方法
2s后整个页面卸载 
app.use：用于安装插件，常用的有路由器（Router）或者状态管理器（Pinia）
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。
建议去看官网，这是面试常问到的。
总结：
-
Teleport（传送门）是Vue 3中的一个新特性，它允许你将组件的内容渲染到DOM中的任意位置，而不受组件层次结构的限制。通过使用
to属性，你可以将组件的内容传送到指定的DOM元素中，从而实现灵活的渲染位置。 -
Suspense（悬挂）是Vue 3中用于处理异步组件加载状态和错误处理的特性。它允许你在异步组件加载过程中展示等待状态（如加载指示器或骨架屏），并处理加载错误。通过使用
-
在Vue 3中，许多全局API已经从Vue构造函数转移到应用对象上。这是为了提供更模块化和可配置的应用程序结构。原先通过
Vue.directive、Vue.mixin等方式注册全局指令、混入等，现在需要使用应用对象（通过createApp函数创建）上的方法进行注册，例如app.directive、app.mixin等。 -
Vue 3引入了一些非兼容性的改变，这意味着在从Vue 2升级到Vue 3时，一些代码可能需要进行修改才能正常工作。其中一些改变包括更严格的模板编译、Composition API的引入、组件实例属性的更改等。为了平滑升级到Vue 3，官方提供了一些工具和指南，帮助开发者进行代码迁移和适配。需要仔细阅读Vue 3的官方文档和迁移指南，以了解这些非兼容性的改变并相应地修改代码。
-
相关阅读:
荧光素标记大鼠甲状腺滤泡上皮细胞FRTL-5，荧光素FITC标记的FRTL-5细胞，FITC-FRTL-5
互联网技术岗笔试面试系列④互联网大厂笔试/面试题目20道
如何在HarmonyOS应用中集成App Linking服务
java面试强基（9）
怎样用一周时间研究 ChatGPT
Rt-Thread 6-空闲线程
【SemiDrive源码分析】【驱动BringUp】41 - LCM 驱动 backlight 背光控制原理分析
MySQL数据库之存储引擎
logstash 编码转换
服务器挂机
- 原文地址：https://blog.csdn.net/LHY537200/article/details/137824570
