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

1.Teleport

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

下面举出例子解释:

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

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

2.新建Modal.vue作为子组件

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

展示:

点击"展示窗口后" 按钮后

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

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

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

4. 然后再点击"展示窗口",你会发现窗口不能再参考视口了,而是父元素容器了。

**提醒:**这里父元素和窗口是包裹关系(父子组件嘛)

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

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

解析:以上代码使用了<teleport>元素将弹窗的内容传送到body元素中,使其在DOM结构中脱离当前组件的范围,可以在任何位置显示。

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

App.vue代码:

javascript 复制代码
<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代码:

javascript 复制代码
<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包裹组件,并配置好defaultfallback

javascript 复制代码
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的值被修改,导致组件重新渲染,此时没有提供标题的相关模板,因此导致标题消失。

如何解决呢?

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

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

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

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

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

App.vue代码:

javascript 复制代码
<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代码:

javascript 复制代码
<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

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-ifv-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.directiveVue.mixin等方式注册全局指令、混入等,现在需要使用应用对象(通过createApp函数创建)上的方法进行注册,例如app.directiveapp.mixin等。

  4. **Vue 3引入了一些非兼容性的改变,这意味着在从Vue 2升级到Vue 3时,一些代码可能需要进行修改才能正常工作。**其中一些改变包括更严格的模板编译、Composition API的引入、组件实例属性的更改等。为了平滑升级到Vue 3,官方提供了一些工具和指南,帮助开发者进行代码迁移和适配。需要仔细阅读Vue 3的官方文档和迁移指南,以了解这些非兼容性的改变并相应地修改代码。

相关推荐
蜗牛快跑2134 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy5 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
前端郭德纲1 小时前
浏览器是加载ES6模块的?
javascript·算法
JerryXZR1 小时前
JavaScript核心编程 - 原型链 作用域 与 执行上下文
开发语言·javascript·原型模式