vue3中provide和inject详解
provide和inject是什么
provide 和 inject 是 Vue.js 框架中提供的一种依赖注入机制。这种机制允许一个祖先组件(提供者)向其所有子孙组件(使用者)提供数据或方法,而不需要通过逐层组件传递属性(props)。
provide和inject如何使用
provide()
- 类型
function provide<T>(key: InjectionKey<T> | string, value: T): void
- 详细信息
provide 功能允许一个组件定义可供其子孙组件注入的数据。
provide()接受两个参数:第一个参数是要注入的 key,可以是一个字符串或者一个 symbol,第二个参数是要注入的值。当使用 TypeScript 时,key 可以是一个被类型断言为InjectionKey的symbol。InjectionKey是一个 Vue 提供的工具类型,继承自Symbol,可以用来同步provide()和inject()之间值的类型。
与注册生命周期钩子的 API 类似,provide()必须在组件的setup()阶段同步调用。 - 示例代码
<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'// 提供静态值
provide('foo', 'bar')// 提供响应式的值
const count = ref(0)
provide('count', count)// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>
inject ()
- 类型
// 没有默认值
function inject<T>(key: InjectionKey<T> | string): T | undefined// 带有默认值
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T// 使用工厂函数
function inject<T>(key: InjectionKey<T> | string,defaultValue: () => T,treatDefaultAsFactory: true
): T
- 详细信息
inject 功能允许子孙组件接收祖先组件通过 provide 提供的数据。
第一个参数是注入的 key(这个key就是用来和provide设定的第一个参数进行匹配)。Vue 会遍历父组件链,通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值,那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值,inject()将返回undefined,除非提供了一个默认值。
第二个参数是可选的,即在没有匹配到 key 时使用的默认值。
第二个参数也可以是一个工厂函数,用来返回某些创建起来比较复杂的值。在这种情况下,必须将 true 作为第三个参数传入,表明这个函数将作为工厂函数使用,而非值本身。
与注册生命周期钩子的 API 类似,inject()必须在组件的setup()阶段同步调用。
当使用TypeScript时,key 可以是一个类型为InjectionKey的symbol。InjectionKey是一个 Vue 提供的工具类型,继承自Symbol,可以用来同步provide()和inject()之间值的类型。 - 示例代码
<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'// 注入不含默认值的静态值
const foo = inject('foo')// 注入响应式的值
const count = inject('count')// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)// 注入一个值,若为空则使用提供的默认值
const bar = inject('foo', 'default value')// 注入一个值,若为空则使用提供的函数类型的默认值
const fn = inject('function', () => {})// 注入一个值,若为空则使用提供的工厂函数
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>
和响应式数据配合使用
provide和inject也可以传递响应式数据和方法,但是传递响应式数据的时候,官网做了一个推荐使用:当提供 / 注入响应式的数据时,**建议尽可能将任何对响应式状态的变更都保持在供给方组件中。**这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内,使其更容易维护。
<!-- 在提供方组件内 -->
<script setup>
import { provide, ref } from 'vue'const location = ref('North Pole')function updateLocation() {location.value = 'South Pole'
}provide('location', {location,updateLocation
})
</script>
<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'const { location, updateLocation } = inject('location')
</script><template><button @click="updateLocation">{{ location }}</button>
</template>
实现原理
在 Vue 3 中 组件的实例方法和属性的继承不再依赖于原型链,而是引入了Composition API,它采用了一种不同的方式来组织组件的代码和状态。组件的选项被重构为一个配置对象,其中 setup 函数用于定义组件的响应式数据、计算属性、方法等。这些选项不再依赖于原型链,而是直接导出给组件实例。
这个改进带来了以下好处:
- 更稳定的数据提供:在 Vue 3 中,每个组件实例都有自己的私有作用域,不会受到原型链的影响,因此不存在 Vue 2 中的潜在问题。
- 更好的类型检查:在 Vue 3 中,TypeScript 或 Flow 等类型检查工具可以更准确地检测到 inject 注入的数据类型。
vue3中的实现原理
provide 的原理:
- provide 是在父组件中使用的选项,用于提供数据给子组件。它实际上是一个函数,它会在父组件实例上创建一个名为 _provided 的对象。
- _provided 对象存储了提供给子组件的数据,而且这些数据会在整个组件树中可用,子组件可以通过inject选项来访问这些数据。。
- 当父组件提供的数据发生变化时,Vue 3 的响应式系统会追踪这些变化并通知所有依赖这些数据的子组件进行更新。
inject 的原理:
- 子组件通过inject选项声明需要注入的数据,可以是一个数组、一个对象或一个函数。这些声明告诉Vue 3要从父组件的提供数据中获取哪些属性。
- 当子组件访问通过inject注入的数据时,Vue 3会在组件树中向上搜索父组件,直到找到包含提供数据的组件或到达根组件。
- 一旦找到包含提供数据的组件,Vue 3会从该组件的_provided属性中获取相应的数据。
- 如果提供的数据是响应式的,子组件将自动成为这些数据的依赖,当提供的数据发生变化时,子组件将被通知并进行更新。
相关文章:
vue3中provide和inject详解
provide和inject是什么 provide 和 inject 是 Vue.js 框架中提供的一种依赖注入机制。这种机制允许一个祖先组件(提供者)向其所有子孙组件(使用者)提供数据或方法,而不需要通过逐层组件传递属性(props&…...
相约华中科技大学,移动云技术论坛来了!NineData创始人CEO叶正盛将分享《数据库全球实时传输技术实践》的主题演讲
2024年9月12日,中国移动云能力中心将在华中科技大学举办“智算浪潮下数据库发展论坛”,共同探讨数据库技术与应用的创新,分享算力网络时代数据库未来发展的洞见。本次论坛,NineData 创始人&CEO 叶正盛受邀参会,并来…...
华为 昇腾 310P 系列 AI 处理器支持 140Tops 的 AI 算力。
1、产品简介 模组是基于昇腾 310P 系列 AI 处理器设计而成,可实现图像、视频等多种数据分析 与推理计算。超强的视频编解码能力以及支持 140Tops 的 AI 算力。在边缘侧及端侧的嵌入式计算 领域,有着极高的性价比,具有超强算力、 超高能效、…...
基于单片机的小型生态鱼缸控制器设计
本设计以STC89C52单片机为核心,利用DS18B20温度传感器和LCD1602液晶显示器实时采集和显示当前环境温度,并根据与预设温度阈值的比较结果控制加热棒或风扇进行加热或制冷操作。此外,该控制器还利用DS1302完成计时功能,在预设时间点…...
git-repo使用
即使用 XML 格式文件(manifest 清单文件)定义一个项目的多仓库关联,然后用 repo 客户端工具操作多仓库 git repo命令行格式: git repo <子命令> <参数>创建一个空目录,作为工作区。 $ mkdir workspace$ …...
如何设计实现完成一个FPGA项目
设计并完成一个FPGA项目是一个复杂但非常有价值的工程任务。以下是一个详细的步骤指南,帮助你从零开始完成一个FPGA项目。 1. 项目定义与需求分析 确定项目目标:明确项目要实现的功能和性能指标。需求分析:列出所有功能需求、性能需求、接口需求等。可行性分析:评估技术可…...
Oracle(106)如何实现透明数据加密?
透明数据加密(TDE)是一种用于保护数据库中静态数据的加密技术。TDE通过自动加密数据库文件和日志文件,确保数据在磁盘上是加密的,从而防止未经授权的访问。TDE的一个主要优点是它对应用程序是透明的,不需要对应用程序代…...
用Python实现时间序列模型实战——Day 18: 时间序列中的季节性与周期性预测
一、学习内容 1. 季节性调整与周期性预测 季节性调整 是在时间序列分析中常用的技术,旨在去除数据中因季节性波动导致的周期性变化,使数据更易于解释和预测。通常,我们可以使用季节性分解方法来分离时间序列中的趋势、季节性和随机成分。 …...
JavaScript ES6特性(var let const、function=>、增强表达赋值、类与对象)
一、var let const 1、var var明明定义在for里面的但是外部能够访问这个变量,说明var可以跨域访问。 2、let let明明定义在for里面的但是外部不能够访问这个变量,说明let不可以跨域访问。 3、const const foo = {}; // 为 foo 添加一个属性,可以成功 foo.prop = 123; fo…...
Paddle安装详解(CPU版本)
目录 1. 安装Python2. 安装paddle3. 验证3.1 初步验证3.2 将numpy版本从2.1.1降为2.0.13.3 再次验证1. 安装Python Python版本 C:\Users\james>python --version Python 3.12.62. 安装paddle 安装paddle及依赖库setuptools python -m pip install paddlepaddle==2.6.1 -…...
PHP即刻送达同城派送小程序系统
即刻送达,同城派送小程序系统让生活更便捷 🚀 瞬间连接,即刻送达的奇迹 你是否曾经因为等待快递而焦急万分?是否渴望有一种方式能让物品像魔法一样瞬间出现在你面前?现在,有了“即刻送达同城派送小程序系…...
RabbitMQ的Direct Exchange模式实现的消息发布案例
Producer生产者代码 import com.rabbitmq.client.Channel; import com.rabbitmq.client.Connection; import com.rabbitmq.client.ConnectionFactory;public class RabbitMQProducer {private final static String EXCHANGE_NAME "direct_message_exchange";privat…...
数据结构-二叉树-基础知识
数据结构-二叉树-基础知识 1.树1.1什么是树1.2基本概念子节点、父节点叶节点节点的度树的高度/深度节点的子孙、祖先 1.3树与非树1.4如何实现1.5实例 2.二叉树2.1什么是二叉树2.2特殊的二叉树满二叉树完全二叉树 2.3性质层数度节点 2.4存储结构 1.树 1.1什么是树 树型结构是一…...
wangeditor——cdn引入的形式创建一个简易版编辑器——js技能提升
昨天同事那边有个需求,就是要实现聊天功能,需要用到一个富文本编辑器,参考如下: 上面的这个效果图是博客园的评论输入框 最终使用wangEditor编辑器实现的效果如下: 只保留了个别的菜单: 默认模式的wangE…...
9.11.
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget), speecher(new QTextToSpeech(this)) {//设置时钟ui->setupUi(this);startTimer(1000);//文本框label居中对齐ui->label_2->setAlignment(Qt::AlignCenter);connect(this,&Widget::my_sign…...
【GeekBand】C++设计模式笔记1_介绍
课程目标 理解松耦合设计思想掌握面向对象设计原则掌握重构技法改善设计掌握GOF核心设计模式 什么是设计模式 目标:复用,以不变应万变 GOF设计模式 从面向对象谈起 深入理解面向对象 向下:深入理解三大面向对象机制 封装:隐藏…...
MySQL 数据库:原理、应用与发展
摘要:本文深入探讨了 MySQL 数据库相关内容。首先介绍了 MySQL 作为开源关系型数据库管理系统的显著特点,包括易用性、跨平台性、高性能、可扩展性、开源免费以及数据安全性等方面。接着详细阐述了其安装与配置过程,涵盖在不同操作系统上的安…...
7.2图像旋转
实验原理 在OpenCV中,图像旋转也是一种常见的几何变换,它可以用来调整图像的方向。图像旋转通常涉及绕着图像中心点旋转一定角度的操作。与图像平移类似,旋转也可以通过仿射变换来实现,但是旋转需要使用到旋转矩阵来定义旋转的角…...
学学vue-2
1.7 指令修饰符 keyup.enter:监听键盘回车事件,回车触发事件keyup.enter代码 v-model修饰符: v-model.trim:去首尾空格v-model.number:变数字(如果是数字的话,转变为数字) 事件名.…...
什么是 Grafana?
什么是 Grafana? Grafana 是一个功能强大的开源平台,用于创建、查看、查询和分析来自多个来源的数据。通过可视化仪表盘(Dashboard),它能够帮助用户监控实时数据、生成历史报告,甚至进行预测分析。Grafana…...
音乐播放器界面定制指南:foobar2000美化方案与体验提升
音乐播放器界面定制指南:foobar2000美化方案与体验提升 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 在数字音乐时代,播放器已不仅是播放工具,更是个人音乐品味的…...
掌握Calibre电子书管理:从格式转换到高级编辑的完整指南
掌握Calibre电子书管理:从格式转换到高级编辑的完整指南 【免费下载链接】calibre The official source code repository for the calibre ebook manager 项目地址: https://gitcode.com/GitHub_Trending/ca/calibre Calibre是一款功能强大的开源电子书管理器…...
CIC-IDS-2018数据集 代码预处理
CIC-IDS-2018数据集 预处理 数据集的获取地址在 https://aistudio.baidu.com/datasetdetail/60692 第一次登陆,注册就行,内容随便填就能注册 create_sample_data() 在代码中被注释,没有添加数据之前,可以跑一下这个函数&…...
Python数据可视化实战:用matplotlib绘制专业级折线图(附完整代码)
Python数据可视化实战:用matplotlib绘制专业级折线图(附完整代码) 数据可视化是现代数据分析不可或缺的一环,而折线图作为最基础也最常用的图表类型之一,能够直观展示数据随时间或有序类别的变化趋势。对于Python开发者…...
不止是上网:用PVE虚拟的OpenWRT旁路由解锁Docker、AdGuard Home和异地组网玩法
解锁PVE虚拟OpenWRT旁路由的进阶玩法:从Docker到智能家居中枢 在家庭网络架构中,OpenWRT旁路由早已超越了简单的网关转发角色。当它运行在PVE虚拟化环境中时,这个轻量级Linux系统(仅需1G内存)可以变身为多功能家庭网络…...
DAMO-YOLO赛博朋克UI实战:CSS3神经突触动画+玻璃拟态设计解析
DAMO-YOLO赛博朋克UI实战:CSS3神经突触动画玻璃拟态设计解析 今天,我们来聊聊如何把一个顶级的AI视觉引擎,包装成一个让人看一眼就忘不掉的“赛博朋克控制台”。你可能会好奇,一个目标检测系统,界面做得再酷有什么用&…...
VibeVoice多音色展示:从儿童到老人的自然过渡效果
VibeVoice多音色展示:从儿童到老人的自然过渡效果 1. 引言 你有没有想过,一段文字可以同时用儿童的天真嗓音、青年的清澈声线、中年的沉稳语调,以及老者的沧桑音色来演绎?这不是科幻电影中的场景,而是VibeVoice带来的…...
Debian GNU/Linux12高效运维指南(网络配置、远程管理、软件更新与安全防护)
1. Debian GNU/Linux12网络配置实战 刚接触Debian GNU/Linux12的朋友们,网络配置可能是你们遇到的第一个挑战。别担心,我会用最直白的方式带你们搞定这个环节。网络配置就像给新房子拉网线,得先把基础线路接好,后续的上网、远程控…...
如何通过League-Toolkit智能工具提升英雄联盟操作效率
如何通过League-Toolkit智能工具提升英雄联盟操作效率 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾因错过对局确认而被…...
毕业季求生指南:用百考通AI重塑你的论文写作全流程
深夜的电脑屏幕前,面对空白的文档和堆积如山的文献,你是否感到无从下手?当查重率居高不下、导师的修改意见密密麻麻时,是否渴望一种更智能的解决方案?本文将为你揭示一个学术写作的新可能。 01 开题之困:从…...
