Vue3 常用组件

news/2024/11/4 6:37:54/

一、Fragment组件

Vue2 的template 模板中必须要有一个根标签,而我们在Vue3 的模板中不需要使用根标签就能渲染,因为Vue3 在内部会将多个标签包含在一个Fragment 虚拟元素中。

好处就在于可以减少标签的层级,减小内存占用。

二、Teleport组件

该组件能够让HTML结构移动到指定的位置,该标签多用于实现弹窗。

<teleport to="移动位置"> HTML结构 <teleport>

这里的移动位置可以是指定的标签名,id名和class名

我们指定的内容就移动到了body 标签中。

三、 Suspense组件

(一)defineAsyncComponent

当用户网速较慢的时候,等待用户加载完成后所有的组件都会一起展示。

为了对展示进行优化,我们可以使用异步引入组件的方法来决定哪些组件先展示,哪些组件后展示。

异步引入组件:

import { defineAsyncComponent } from 'vue';

const 组件名 = defineAsyncComponent(() => import('组件路径'));

 这样在我们网速慢的时候先展示的就是App 组件中的内容:

 

(二) Suspense组件

但是在页面还未加载完成时,就没有Item组件的位置,页面会抖动。

这时候我们就可以使用Suspense 组件来解决这个问题。

<Suspense>

  <template v-slot:default>

    加载完成的样式

  </template>

  <template v-slot:fallback>

    加载中的样式

  </template>

</Suspense>

<template><h1>h1标签</h1><Suspense><template v-slot:default><Item /></template><template v-slot:fallback><h3>加载中...</h3></template></Suspense><h2>h2标签</h2>
</template>

这样,我们在组件还没加载出来的情况下就能够实现加载中的效果。 

(三)配合async使用

我们在子组件中可以返回一个Promise,在这种情况下,也能够保证子组件内部加载完成过后再展示。


http://www.ppmy.cn/news/1230882.html

相关文章

HR问:有没有免费的人才测评工具?

人才测评工具分为两种&#xff0c;一种是测评量表&#xff0c;一种是操作量表的工具&#xff0c;在线测评的方式没有普及之前&#xff0c;很多朋友都习惯把测评量表&#xff08;测评试题&#xff09;称为测评工具&#xff0c;其实我认为量表就是量表&#xff0c;而试试量表测评…

Spark---核心介绍

一、Spark核心 1、RDD 1&#xff09;、概念&#xff1a; RDD&#xff08;Resilient Distributed Datest&#xff09;&#xff0c;弹性分布式数据集。 2&#xff09;、RDD的五大特性&#xff1a; 1、RDD是由一系列的partition组成的 2、函数是作用在每一个partition(split…

平衡二叉树c语言版

一、定义二叉树结点结构体 /*** 定义平衡二叉树结点 */ struct avlbinarytree { //数据域NodeData* data;///树高int h;struct avlbinarytree* left;struct avlbinarytree* right; }; typedef struct avlbinarytree AVLNode; 二、声明函数的操作 /*** 创建结点 */ AV…

PP-PicoDet算法训练行人检测模型

PP-PicoDet算法训练行人检测模型 1&#xff0c;效果图2&#xff0c;PP-PicoDet介绍3&#xff0c;使用飞浆框架训练模型1&#xff0c;准备好图片和对应的标注文件2&#xff0c;划分训练集和验证集3&#xff0c;vi label_list.txt4&#xff0c;目录结构5&#xff0c;修改配置文件…

Android VSYNC发展历程

0 前言 安卓直到android-4.1.1_r1才首次引入VSYNC实现&#xff0c;然后逐步演进到android-4.4才得以完善&#xff0c;并在android-11、12后继续大改。 1 尚未引入 android-4.0.4_r2.1之前尚未引入VSYNC[1]&#xff0c;SurfaceFlinger被实现为一个线程&#xff0c;通过睡眠来实…

【Django-DRF用法】多年积累md笔记,第3篇:Django-DRF的序列化和反序列化详解

本文从分析现在流行的前后端分离Web应用模式说起&#xff0c;然后介绍如何设计REST API&#xff0c;通过使用Django来实现一个REST API为例&#xff0c;明确后端开发REST API要做的最核心工作&#xff0c;然后介绍Django REST framework能帮助我们简化开发REST API的工作。 全…

请求prometheus数据然后使用tensorflow计算正则模型

使用tensorflow 计算正则模型, 数据来源为Prometheus的数据近7天的数据, 然后计算了90%区间的上下限和当前值的概率密度 import requests import pandas as pd import tensorflow as tf from datetime import datetime, timedelta# 定义 Prometheus 查询的参数 url "htt…

钩子函数-hook

钩子函数-hook hook 的作用 利用钩子函数可以在所有测试用例执行前做一些预置操作&#xff08;如&#xff1a;准被测试数据、测试环境&#xff09; 或者在测试结束后做一些后置操作&#xff08;如&#xff1a;清理测试数据&#xff09; 钩子函数在其它框架中也有&#xff0…