Vue3 第五节 一些组合式API和其他改变

1.provide和inject

2.响应式数据判断

3.Composition API的优势

4.新的组件

5.其他改变

一.provide和inject

作用:实现祖与后代组件间通信

套路:父组件有一个provide选项来提供数据,后代组件有一个inject选项来开始使用这些数据

(1)在祖组件中 

(2)后代组件中

 (3)代码汇总

① App.vue

<template><div class="app"><h3>我是App(祖) {{ name }}--{{ price }}</h3><Child /></div>
</template><script>
import { reactive, provide, toRefs } from 'vue'
import Child from './components/Child.vue'
export default {name: 'App',components: { Child },setup () {let car = reactive({name: '奔驰',price: 40})// 给自己的后代组件提供数据provide('car', car)return {...toRefs(car)}}
}
</script><style>
.app {background: gray;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: lightblue;padding: 10px;
}
</style>

③ Son.vue

<template><div class="son"><h3>我是Son组件(孙) {{ car.name }}--{{ car.price }}</h3></div>
</template><script>
import { inject } from 'vue'
export default {name: 'Son',setup () {let car = inject('car')return {car}}
}
</script><style>
.son {background: orange;padding: 10px;
}
</style>

二.响应式数据判断

  • isRef:检查一个值是否为一个ref对象
  • isReactive:检查一个对象是否由reactive创建的响应式代理
  • isReadonly:检查一个对象是否是由readonly创建的只读代理
  • isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理

三.Composition API的优势

① 传统optionAPI中,新增或者修改一个需求,就需要分别在data, methods,computed里修改

不集中

② 组合式API更加优雅的组织我们的代码,函数,让相关功能的代码更加有序的组织在一起

四.新的组件

(1)Fragment

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

(2)Teleport

  • 是一种能够将我们的组件html结构移动到指定位置的技术
  • 使用

 代码:

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: lightblue;padding: 10px;
}
</style>

Dialog.vue

<template><div><button @click="isShow = true">点我弹个窗</button><teleport to="body"><div v-if="isShow" class="dialog"><div class="mask"><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>
.dialog {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 300px;height: 300px;background-color: green;
}
.mask {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);
}
</style>

Son.vue

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

App.vue

<template><div class="app"><h3>我是App</h3><Child /></div>
</template><script>
import Child from './components/Child.vue'
export default {components: { Child },name: 'App'
}
</script><style>
.app {background: gray;padding: 10px;
}
</style>

(3)Suspense 

  • 等待异步组件时渲染一些额外内容,让应用有更好的用户体验
  • Suspense中提供两个插槽,第一个default插槽中放加载的组件,第二个fallback中放额外渲染的内容,如果网速比较慢,组件加载不出来的时候,会展示额外渲染的内容

 五.其他改变

① 全局API的转移

  • Vue2.x有很多全局API和配置,Vue3.0对这些API做出了调整,将全局的API,即:Vue.xxx调整到应用实例(app)上
2.x 全局 API(Vue3.x 实例 API (app)
Vue.config.xxxxapp.config.xxxx
Vue.config.productionTip移除
Vue.componentapp.component
Vue.directiveapp.directive
Vue.mixinapp.mixin
Vue.useapp.use
Vue.prototypeapp.config.globalProperties

② 其他改变

  • data选项影适中被声明为一个函数
  • 过渡类名的更改
- - Vue2.x写法```css.v-enter,.v-leave-to {opacity: 0;}.v-leave,.v-enter-to {opacity: 1;}```- Vue3.x写法```css.v-enter-from,.v-leave-to {opacity: 0;}.v-leave-from,.v-enter-to {opacity: 1;}```- 
  • 移除keyCode作为 v-on 的修饰符,同时也不再支持config.keyCodes

  • 移除v-on.native修饰符

- - 父组件中绑定事件```vue<my-componentv-on:close="handleComponentEvent"v-on:click="handleNativeClickEvent"/>```- 子组件中声明自定义事件```vue<script>export default {emits: ['close']}</script>```- 
  • 移除过滤器(filter)

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

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

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

相关文章

PHP生成随机数

要在 PHP 中生成随机密码&#xff0c;可以使用 rand() 函数和字符串操作函数。以下是一个示例代码来生成包含字母、数字和特殊字符的随机密码 function generateRandomPassword($length 8) {// 定义包含字母、数字和特殊字符的字符集$characters abcdefghijklmnopqrstuvwxyz…

概念解析 | AutoFed:面向异构数据的联邦多模态自动驾驶的学习框架

AutoFed:面向异构数据的联邦多模态自动驾驶的学习框架 注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:面向异构数据的联邦学习在自动驾驶中的应用。 参考文献:Zheng T, Li A, Chen Z, et al. AutoFed: Heterogeneity-Aware F…

AcWing算法提高课-1.3.17背包问题求具体方案

宣传一下算法提高课整理 <— CSDN个人主页&#xff1a;更好的阅读体验 <— 本题链接&#xff08;AcWing&#xff09; 点这里 题目描述 有 N N N 件物品和一个容量是 V V V 的背包。每件物品只能使用一次。 第 i i i 件物品的体积是 v i v_i vi​&#xff0c;价值…

HEIF—— 1、vs2017编译Nokia - heif源码

HEIF(高效图像文件格式) 一种图片有损压缩格式,它的后缀名通常为".heic"或".heif"。 HEIF 是由运动图像专家组 (MPEG) 标准化的视觉媒体容器格式,用于存储和共享图像和图像序列。它基于著名的 ISO 基本媒体文件格式 (ISOBMFF) 标准。HEIF读写器引擎…

【C++】位图|布隆过滤器|海量数据处理面试题

文章目录 一.位图1. 位图的概念2. 位图的使用3. 位图的实现 二.布隆过滤器1. 布隆过滤器2. 布隆过滤器的实现 三.海量数据处理面试题1.位图2.布隆过滤器3.哈希切割 一.位图 1. 位图的概念 所谓位图&#xff0c;就是用每一位来存放某种状态&#xff0c;适用于海量数据&#xf…

android模拟器创建失败,出现“The emulator process for AVD xxx has terminated.”的错误

查找问题&#xff1a; 参考文章&#xff1a; 解决 Android studio 出现“The emulator process for AVD xxx has terminated.”的错误_the emulator process for avd pixel_3a_api_34_exten_千里未归jan的博客-CSDN博客

【LeetCode】删除并获得点数

删除并获得点数 题目描述算法分析编程代码空间优化 链接: 删除并获得点数 题目描述 算法分析 编程代码 class Solution { public:int deleteAndEarn(vector<int>& nums) {const int N 10001;int arr[N] {0};for(const auto& n : nums){arr[n]n;}vector<in…

2.安装Docker-ce

一、删除之前安装的docker(若之前未安装过&#xff0c;此步骤省略…) 进入centos根目录执行以下命令&#xff08;\ 是linux系统种命令换行符&#xff0c;如果命令过长&#xff0c;可以用\来换行&#xff09; yum remove docker \ docker-client \ docker-client-latest \ doc…

尚品汇总结十:秒杀模块(面试专用)

1、需求分析 所谓“秒杀”&#xff0c;就是商家发布一些超低价格的商品&#xff0c;所有买家在同一时间网上抢购的一种销售方式。通俗一点讲就是商家为促销等目的组织的网上限时抢购活动。由于商品价格低廉&#xff0c;往往一上架就被抢购一空&#xff0c;有时只用一秒钟。 秒…

状态模式(State)

状态模式是一种行为设计模式&#xff0c;允许一个对象在其内部状态改变时改变它的行为&#xff0c;使其看起来修改了自身所属的类。其别名为状态对象(Objects for States)。 State is a behavior design pattern that allows an object to change its behavior when its inter…

AI五子棋——超强改进版本

AI五子棋的改进版本来啦~~ 我们发现&#xff0c;原版的AI五子棋如果调成4的话&#xff0c;非常之慢&#xff01;&#xff01;下面给出原版的链接 AI五子棋&#xff08;原版本&#xff09; 因此我对其进行了改进&#xff0c;由于正常人下五子棋不会东下一颗棋&#xff0c;西下…

Flutter Dart语言(05)异步

0 说明 该系列教程主要是为有一定语言基础 C/C的程序员&#xff0c;快速学习一门新语言所采用的方法&#xff0c;属于在C/C基础上扩展新语言的模式。 1 async和await 在Dart语言中&#xff0c;虽然没有像其他语言&#xff08;如Java、C、Python&#xff09;中的传统多线程概…

Java怎么手动将对象注入到springboot

在Java中&#xff0c;可以使用Spring的ApplicationContext来手动将对象注入到Spring Boot中。 1. 首先&#xff0c;确保你已经在Spring Boot应用程序中引入了Spring的依赖&#xff0c;比如 spring-boot-starter 。 2. 在你的类中注入ApplicationContext对象&#xff1a; Autowi…

谷歌广告(Google ads)如何投放?新手必看的超全教程

Google是公认的全球最大的搜索引擎&#xff0c;同时&#xff0c;Google还通过旗下的 YouTube、Gmail、Google Play、Android等产品&#xff0c;汇集了海量的海外用户。对于跨境出海商家来说&#xff0c;谷歌广告是提高销售额、提高产品流量、拓展全球市场的重要推广渠道。 那么…

一文走进时序数据库性能测试工具 TSBS

一、背景 在物联网、车联网等时序数据场景中&#xff0c;数据的高速写入能力至关重要&#xff0c;会对产品方案的可用性、可靠性和扩展性产生影响。 以物联网为例&#xff0c;当面临千万甚至上亿设备、平均每个设备采集几十个到几百个指标时&#xff0c;每秒生成的数据将达到…

Docker+Consul+Registrator 实现服务注册与发现

第四阶段 时 间&#xff1a;2023年8月8日 参加人&#xff1a;全班人员 内 容&#xff1a; DockerConsulRegistrator 实现服务注册与发现 目录 一、服务注册中心引言 CAP理论是分布式架构中重要理论&#xff1a; 二、服务注册中心软件 &#xff08;一&#xff09;Zoo…

ELK 将数据流转换回常规索引

ELK 将数据流转换回常规索引 现象&#xff1a;创建索引模板是打开了数据流&#xff0c;导致不能创建常规索引&#xff0c;并且手动修改、删除索引模板失败 "reason" : "composable template [logs_template] with index patterns [new-pattern*], priority [2…

中国剩余定理的同态性质(CRT变换的同态性)

1、中国剩余定理简介&#xff08;Chinese Remainder Theory&#xff0c;CRT&#xff09; 中国剩余定理是关于求解一元线性同余方程组的方法&#xff0c;用形式化的描述就是&#xff1a; m 1 , m 2 , m n m_1,m_2,m_n m1​,m2​,mn​是两两互素的n个整数&#xff0c;有下面的同…

MQTT 订阅接收消息 mosquitto 方式

1 说明 采用 mosquitto 库&#xff0c;实现订阅主题&#xff0c;并接收消息。其中服务器有做限制&#xff0c;需要对应的 cilent id &#xff0c;cafile 、certfile 、keyfile 等配置2 环境 采用ubuntu 直接编译调试 安装mosquitto 库 sudo apt install libmosquitto-dev su…

chatGLM 本地部署(windows+linux)

chatGLM算是个相对友好的模型&#xff0c;支持中英文双语的对话交流&#xff0c;清华出的 我的教程无需特别的网络设置&#xff0c;不过部分情况因为国内网络速度慢&#xff0c;需要反复重复 chatGLM github地址 一、硬件需求 N卡8G显存以上&#xff0c;最好16G以上&#xff…