Composition API 的优势、新的组件(Fragment,Teleport,Suspense)【Vue3】

news2024/11/17 6:49:55

四、Composition API 的优势

1. Options API 存在的问题

使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改。
在这里插入图片描述
在这里插入图片描述

2. Composition API 的优势

我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。
在这里插入图片描述
在这里插入图片描述

五、新的组件

1. Fragment

  • 在Vue2中:组件必须有一个根标签
  • 在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中
  • 好处:减少标签层级,减小内存占用

2. Teleport

  • 什么是Teleport?
    ——Teleport (传送)是一种能够将我们的组件html结构移动到指定位置的技术。

Dialog.vue

<template>
  <div>
    <button @click="isShow = true">点我弹窗</button>
    <teleport to="body">
        <div v-if="isShow" class="mask">
            <div class="dialog">
                <h3>我是一个弹窗</h3>
                <h4>一些内容</h4>
                <h4>一些内容</h4>
                <h4>一些内容</h4>
                <button @click="isShow = false">关闭弹窗</button>
            </div>
        </div>
    </teleport>
  </div>
</template>

<script >
import {ref} from 'vue'
    export default {
        name: 'Dialog',
        setup(){
            let isShow = ref(false)
            return {isShow}
        }
    }
</script>

<style>
    .mask {
        position: absolute;
        top: 0;bottom: 0; left: 0; right: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .dialog {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 300px;
        height: 300px;
        background-color: green;
    }
</style>

Son.vue

<template>
    <div class="Son">
      <h3>我是Son组件</h3>
      <Dialog></Dialog>
    </div>
  </template>
  
  <script >
import Dialog from './Dialog.vue'
    export default {
      name: 'Son',
      components: {Dialog}
    }
  </script>
  
  <style>
    .Son {
      background-color: orange;
      padding: 10px;
    }
  </style>

Child.vue

<template>
    <div class="Child">
      <h3>我是Child组件</h3>
      <Son></Son>
    </div>
  </template>
  
  <script >
  import Son from './Son.vue'

    export default {
      name: 'Child',
      components: {Son},
    }
  </script>
  
  <style>
    .Child {
      background-color: skyblue;
      padding: 10px;
    }
  </style>

3. Suspense

  • 等待异步组件时渲染一些额外内容,让应用有更好的用户体验
  • 使用步骤:
    • 引入异步组件
import { defineAsyncComponent } from 'vue';//静态引入
const Child = defineAsyncComponent(() => import('./components/Child.vue'))//异步引入
- 使用 Suspense 包裹组件,并配置好default 与 fallback
<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Suspense>
      <template v-slot:default>
        <Child></Child>
      </template>
      <template v-slot:fallback>
        <h3>稍等,加载中...</h3>
      </template>
    </Suspense>
  </div>
</template>

六、其他

1. 全局API的转移

  • Vue2.x有许多全局API 和 配置。
    • 例如:注册全局组件、注册全局指令等。
//注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

//注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}
  • Vue3.0 中对这些API做出了调整:
    • 将全局的API,即:Vue.xxx 调整到应用实例(app)上
2.x全局API(vue)3.x 实例API(app)
Vue.config.xxxxapp.config.xxxx
Vue.config.production Tip移除
Vue.componentapp.component
Vue.directiveapp.directive
Vue.mixinapp.mixin
Vue.useapp.use
Vue.prototypeapp.config.globalProperties

2.其他改变

  • data选项应始终被声明为一个函数。
  • 过度类名的更改:
    • Vue2.x写法
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}
- Vue3.x写法
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}
  • 移除keyCode作为 v-on 的修饰符,同时也不再支持configkeyCodes
  • 移除v-on.native修饰符
    • 父组件中绑定事件
<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>
- 子组件中声明自定义事件
<script>
  export default {
    emits: ['close']
  }
</script>
  • 移除过滤器(filter)

过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是“只是JavaScript”的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/493135.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Packet Tracer - 在思科路由器上配置 AAA 认证

Packet Tracer - 在思科路由器上配置 AAA 认证 拓扑图 地址分配表 设备 接口 IP 地址 子网掩码 默认网关 交换机端口 R1 G0/1 192.168.1.1 255.255.255.0 不适用 S1 F0/1 S0/0/0 (DCE) 10.1.1.2 255.255.255.252 不适用 不适用 R2 G0/0 192.168.2.1 255.2…

(4)基本组件

目录 1. Designer 设计师** 2. Layout 布局*** 3. 基本组件 3.1 QWidget** 3.2 ui指针 3.3 QLabel 标签** 3.4 QAbstractButton 按钮类** 示例 1. Designer 设计师** Designer是一款独立的用于设计Qt界面的应用程序。 Designer程序保存的文件格式为.ui&#xff0c;这是Qt中的界…

腾讯云轻量应用服务器修改镜像系统有哪些限制?

腾讯云轻量应用服务器镜像可以更换或修改吗&#xff1f;可以&#xff01;镜像可以修改&#xff0c;镜像是指轻量服务器的预装操作系统&#xff0c;轻量服务器创建成功后镜像也是可以更换的。 镜像是轻量服务器的预装操作系统&#xff0c;轻量应用服务器的镜像不仅包含操作系统&…

看我如何通过帮助服务台轻松黑掉数百家公司

导语&#xff1a;几个月前&#xff0c;我发现黑客可以利用一个漏洞访问目标公司的内部通信。 这个漏洞只需要点击几下&#xff0c;就可以访问企业内部网络、 Twitter等社交媒体账户&#xff0c;以及最常见的Yammer和Slack团队。 更新: The Next Web 写了一篇我发现的这个漏洞的…

SAP BusinessObjects BI crack

SAP BusinessObjects BI crack 通过基于驱动程序标准的数据库、报告工具&#xff0c;甚至自定义应用程序&#xff0c;加入SAP BusinessObjects BI报告和分析。 与BI分析、报告、ETL工具和自定义解决方案集成。 SAP BusinessObjects BI奇妙功能中的CData驱动程序&#xff1a; BI…

数据结构与算法基础(王卓)(35):交换排序之快排【第一阶段:第一遍遍历】

目录 快速排序&#xff1a; 法一&#xff1a; 法二&#xff1a;&#xff08;常用、重难点&#xff09; 第一阶段&#xff1a;第一遍遍历 Project 1: 问题&#xff1a; Project 2: 问题&#xff1a; Project 3: 问题&#xff1a; Project 4: Project 5: 快速排序&am…

spring-模型数据和视图---视图解析器的说明以及大量代码演示

目录 spring-模型数据 ● 说明 应用实例需求 创建后面所有代码执行成功之后跳转的vote_ok.jsp页面 方式 1: 通过 HttpServletRequest放入 request 域 创建 Master类 创建Pet类 创建model_data.jsp 修改 VoteHandler增加方法 创建vote_ok.jsp, 显示数据 完成测试(Post…

初级算法-动态规划

主要记录算法和数据结构学习笔记&#xff0c;新的一年更上一层楼&#xff01; 初级算法-动态规划 一、斐波那契数二、爬楼梯三、使用最小花费爬楼梯四、不同路径五、不同路径二六、整数拆分七、不同的二叉搜索树八、0-1背包九、分割等和子集十、最后一块石头的重量十一、目标和…

深入浅出分支语句—【C语言】

目录 前言&#xff1a;为什么要学习分支和循环语句呢&#xff1f; 1. 语句的分类 2. 分支语句&#xff08;选择语句&#xff09; 2.1 if-else语句 注意点&#xff1a;if-else语句后面不加{}&#xff0c;默认只能跟一条语句 2.2 switch语句 注意点&#xff1a; 前言&…

平衡二叉树旋转机制

概念 平衡二叉树的旋转机制是一种通过对树进行旋转操作来保持其平衡的方法。 分类 平衡二叉树的旋转机制包括两种基本类型的旋转&#xff1a;左旋和右旋&#xff0c;以及它们的组合。 左旋 左旋是将一个节点的右子节点旋转到它的位置上&#xff0c;同时将该节点移到其左侧&…

关于低代码开发,你是真的了解了吗?

在低代码开发已是大势所趋的今天&#xff0c;不少企业都切身感受到了低代码开发带来的便利。低代码开发平台的优势在当下数字化浪潮中&#xff0c;为企业提供了定制专属的数字化解决方案。 低代码本身没有太强的行业属性&#xff0c;这也让低代码开发平台能够更加灵活地适应不同…

嵌入式 QT 界面布局管理

目录 1、实例程序功能 2、界面组件布局 2.1 界面组件的层次关系 2.2 布局管理 2.3 伙伴关系和Tab顺序 1、实例程序功能 创建一个 Widget Application 项目 samp2_2&#xff0c; 在创建窗体时选择基类 QDialog &#xff0c;生成的类命名为 QWDialog &#xff0c;并选择…

Python实用记录(十三):python脚本打包exe文件并运行

文章目录 打包准备文件准备环境安装 具体运行第一步第二步第三步 注意 打包准备 文件准备 这里准备一个简单的python代码&#xff08;打开电脑摄像头&#xff09; import cv2 if __name__ __main__:cap cv2.VideoCapture(0)ret, frame cap.read()while ret:ret, frame c…

希亦洗地机和添可洗地机哪个好用?口碑洗地机详细对比

在当今这个科技发达的社会&#xff0c;为了能够帮助人们高效率的工作&#xff0c;各色各样的发明不断出现。扫地、拖地是我们日常生活中再普通不过的一项家务了&#xff0c;对于小型的房子而言打扫起来就比较轻松&#xff0c;对于繁忙的上班族打扫空间较大的房子就很困难&#…

Undo Log详解

undo log 基本概念 undo log是一种用于撤销回退的日志&#xff0c;在数据库事务开始之前&#xff0c;MySQL会先记录更新前的数据到undo log日志文件里面&#xff0c;当事务回滚时或者数据库崩溃时&#xff0c;可以利用 undo log来进行回退 Undo Log产生和销毁&#xff1a;Und…

redis(2)

缓存:缓存是一个高速数据交换的存储器&#xff0c;使用它可以迅速的访问和操作数据 因为单体应用已经不适用于现在的环境了,所以最终变成分布式系统,本地缓存已经不适用了 1)比如说张三用户访问了应用程序nginx把请求分配给A服务器 A机器查询数据库&#xff0c;并且把数据库的结…

模型实战(11)之win10下Opencv+CUDA部署yolov5、yolov8算法

win10下Opencv+CUDA部署yolov5、yolov8算法 测试环境:AMDRH7000+RTX3050+win10+vs2-10+opencv455+cuda11.7关于opencv470+contrib+cuda的编译,可以详见:Win10下Opencv+CUDA联合编译详细教程本文代码同时支持yolov5、yolov8两个模型,详细过程将在文中给出,完整代码仓库最后…

自动化测试真的能提效吗?怎么才能真正掌握自动化测试技巧呢?

近年来&#xff0c;随着软件开发速度的提高&#xff0c;自动化测试已经成为了一个必要的环节。但是&#xff0c;对于自动化测试&#xff0c;有些人认为它能够大幅提升效率&#xff0c;而有些人则认为自动化测试无法替代手工测试&#xff0c;并且实施自动化测试需要投入大量的时…

vue3 - 超详细头像裁剪并上传到服务器,支持按照自定义比例裁切图片效果组件插件(详细示例源码教程,一键复制运行开箱即用)

效果图 大部分都贼难用,而且全是bug。。并且很少有 vue3的,全是 vue2。。 本博客实现了在 vue3.js 项目中,实现图像上传后并按一定的比例进行裁剪的示例功能源码,支持各种参数、样式修改, 示例有 Element Plus + Vue3.js 版本,也有纯 Vue3.js 版本(无 UI 框架搭配),按…

【机器学习】西瓜书课后习题参考答案—第一章

记录西瓜书课后习题的思考与参考答案。 1.1 表1.1中若只包含编号为1和4的两个样例&#xff0c;试给出相应的版本空间。 答&#xff1a; 版本空间&#xff1a;与训练集一致的“假设集合”&#xff0c;称之为“版本空间”&#xff08;version space&#xff09; 只包含编号为1和…