Vue组件通信原理剖析（三）provide/inject原理分析

2024-08-31 19:48
文章标签 javascript 分析 组件 剖析 vue 原理 通信 frontend inject provide

本文主要是介绍Vue组件通信原理剖析（三）provide/inject原理分析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先我们先从一个面试题入手。

面试官问： “Vue中组件通信的常用方式有哪些？”
我答：
1. props
2. 自定义事件
3. eventbus
4. vuex
5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject
6. 此外还有一些非props特性$attrs、$listeners

面试官追问：“那你能分别说说他们的原理吗？”
我：[一脸懵逼]😳

在介绍provide和inject之前我们先简单看看其他几个常用属性。

如果要看别的属性原理请移步到Vue组件通信原理剖析（一）事件总线的基石 o n 和 on和 on和emit和Vue组件通信原理剖析（二）全局状态管理Vuex

$parent / $root

解决问题：具有相同父类或者相同根元素的组件

// parant 
<child1></child1> 
<child2></child2>// child1
this.$parent.$on('foo', handle)// child2
this.$parent.$meit('foo')

$children

解决问题：父组件访问子组件实现父子通信

// parent
this.$children[0].childMethod = '父组件调用子组件方法的输出'

注意：$children是不能保证子元素的顺序

$attrs/$listeners

$attrs 包含了父作用域中不作为prop被识别且获取的特性绑定属性（class/style除外），如果子组件没声明prop，则包含除clas、style外的所有属性，并且在子组件中可以通过v-bind="$attrs"传入内部组件

// parent
<child foo="foo"></child>// child
<p>{{ $attrs.foo }}</p>

$listeners
包含了父作用域中的 (不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件在创建更高层次的组件时非常有用。
简单点讲它是一个对象，里面包含了作用在这个组件上所有的监听器（监听事件），可以通过v-on="$listeners"将事件监听指向这个组件内的子元素（包括内部的子组件）。
为了查看方便，我们设置`inheritAttrs: true,后面补充一下inheritAttrs。

// parent
<child @click="onclick"></child>// child 
// $listeners会被展开并监听
<p v-on="$listeners"></p>

$refs

解决问题：父组件访问子组件实现父子通信，和$children类似

// parent
<child ref="children"></child>mounted() {this.$refs.children.childMethod = '父组件调用子组件的输出'
}

provide/inject

解决问题：能够实现祖先和后代之间的传值

// ancestor
provide() {return {foo: 'foo'}
}// descendent
inject: ['foo']

那么问题来了，这个数据通信是什么样的机制呢？
我们先来看一个列子

// parent 父类
<template><div class=""><p>我是父类</p><child></child></div>
</template>export default {components: {child: () => import('./child')},provide: {foo: '我是祖先类定义provide'},
}// child 子类
<template><div class=""><p>我是子类</p><p>这是inject获取的值: {{ childFoo }}</p><grand></grand></div>
</template>
export default {components: {grand: () => import('./grand')},inject: { childFoo: { from: 'foo' } },
}// grand 孙类
<template><div class=""><p>我是孙类</p><p>这是inject获取的值: {{ grandFoo }}</p></div>
</template>
export default {components: {},inject: { grandFoo: { from: 'foo' } },
}

下面我结合上面的示例和源码一步一步分析一下：

  1. 先说说provide是怎么定义参数的，源码走起

    // 初始化Provide的实现
export function initProvide (vm: Component) {const provide = vm.$options.provideif (provide) {vm._provided = typeof provide === 'function'? provide.call(vm): provide}
}// vm.$options是怎么来的，是通过mergeOpitions得到的
if (options && options._isComponent) {// optimize internal component instantiation// since dynamic options merging is pretty slow, and none of the// internal component options needs special treatment.initInternalComponent(vm, options);
} else {vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm);
}// 我们在看看mergeOptions的实现
const options = {}
let key
for (key in parent) {mergeField(key)
}
for (key in child) {if (!hasOwn(parent, key)) {mergeField(key)}
}
function mergeField (key) {const strat = strats[key] || defaultStratoptions[key] = strat(parent[key], child[key], vm, key)
}
return options// 找到strat方法的实现
strats.provide = mergeDataOrFn;export function mergeDataOrFn (parentVal: any,childVal: any,vm?: Component
): ?Function {if (!vm) {// in a Vue.extend merge, both should be functionsif (!childVal) {return parentVal}if (!parentVal) {return childVal}return function mergedDataFn () {return mergeData(typeof childVal === 'function' ? childVal.call(this, this) : childVal,typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal)}} else {return function mergedInstanceDataFn () {// instance mergeconst instanceData = typeof childVal === 'function'? childVal.call(vm, vm): childValconst defaultData = typeof parentVal === 'function'? parentVal.call(vm, vm): parentValif (instanceData) {return mergeData(instanceData, defaultData)} else {return defaultData}}}
}

    从上面的逻辑可以看出，在组件初始化时，会将vm.$options.provide这个函数赋值给provide，并把调用该函数得到的结果赋值给vm._provided，那么就会得到vm._provided = { foo: "我是祖先类定义provide" }

  2. 不要停，我们继续探究一下子孙组件中的inject是怎么实现的，上源码

    // 首先，初始化inject
export function initInjections (vm: Component) {const result = resolveInject(vm.$options.inject, vm)if (result) {toggleObserving(false)Object.keys(result).forEach(key => {/* istanbul ignore else */if (process.env.NODE_ENV !== 'production') {defineReactive(vm, key, result[key], () => {warn(`Avoid mutating an injected value directly since the changes will be ` +`overwritten whenever the provided component re-renders. ` +`injection being mutated: "${key}"`,vm)})} else {defineReactive(vm, key, result[key])}})toggleObserving(true)}
}// 初始化的inject实际上是resolveInject的结果，下面我们看看resolve都有哪些操作
// 第一步：获取组件中定义的inject的key值，然后进行遍历
// 第二步：根据key值获取对应的在provide中定义的provideKey，就比如上面的根据"childFoo"获取到"foo"
// 第三步：通过source = source.$parent逐级往上循环在_provided中查找对应的provideKey
// 第四步：如果找到，将实际的key值作为键，source._provided[provideKey]作为值，存为一个对象，当作这个函数的结果
export function resolveInject (inject: any, vm: Component): ?Object {if (inject) {// inject is :any because flow is not smart enough to figure out cachedconst result = Object.create(null)const keys = hasSymbol? Reflect.ownKeys(inject): Object.keys(inject)for (let i = 0; i < keys.length; i++) {const key = keys[i]// #6574 in case the inject object is observed...if (key === '__ob__') continueconst provideKey = inject[key].fromlet source = vmwhile (source) {if (source._provided && hasOwn(source._provided, provideKey)) {result[key] = source._provided[provideKey]break}source = source.$parent}if (!source) {if ('default' in inject[key]) {const provideDefault = inject[key].defaultresult[key] = typeof provideDefault === 'function'? provideDefault.call(vm): provideDefault} else if (process.env.NODE_ENV !== 'production') {warn(`Injection "${key}" not found`, vm)}}}return result}
}

说到这里，我们应该知道了provide/inject之间的调用逻辑了吧。最后，我们在用一句话总结一下：

当祖先组件在初始化时，vue首先会通过mergeOptions方法将组件中provide配置项合并vm.$options中，并通过mergeDataOrFn将provide的值放入当前实例的_provided中，此时当子孙组件在初始化时，也会通过合并的options解析出当前组件所定义的inject，并通过网上逐级遍历查找的方式，在祖先实例的-provided中找到对应的value值

至此，关于Vue的组件通信原理就介绍完了，希望能对大家有帮助。

全部文章链接

Vue组件通信原理剖析（一）事件总线的基石 o n 和 on和 on和emit
Vue组件通信原理剖析（二）全局状态管理Vuex
Vue组件通信原理剖析（三）provide/inject原理分析

最后喜欢我的小伙伴也可以通过关注公众号“剑指大前端”，或者扫描下方二维码联系到我，进行经验交流和分享，同时我也会定期分享一些大前端干货，让我们的开发从此不迷路。
在这里插入图片描述

这篇关于Vue组件通信原理剖析（三）provide/inject原理分析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1124835。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
Springboot中分析SQL性能的两种方式详解

Springboot中分析SQL性能的两种方式详解

《Springboot中分析SQL性能的两种方式详解》文章介绍了SQL性能分析的两种方式：MyBatis-Plus性能分析插件和p6spy框架,MyBatis-Plus插件配置简单,适用于开发和测试环... 目录SQL性能分析的两种方式:功能介绍实现方式:实现步骤:SQL性能分析的两种方式:功能介绍记录
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
最长公共子序列问题的深度分析与Java实现方式

最长公共子序列问题的深度分析与Java实现方式

《最长公共子序列问题的深度分析与Java实现方式》本文详细介绍了最长公共子序列（LCS）问题,包括其概念、暴力解法、动态规划解法,并提供了Java代码实现,暴力解法虽然简单,但在大数据处理中效率较低,... 目录最长公共子序列问题概述问题理解与示例分析暴力解法思路与示例代码动态规划解法DP 表的构建与意义动
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
MySQL中的MVCC底层原理解读

MySQL中的MVCC底层原理解读

《MySQL中的MVCC底层原理解读》本文详细介绍了MySQL中的多版本并发控制（MVCC）机制,包括版本链、ReadView以及在不同事务隔离级别下MVCC的工作原理,通过一个具体的示例演示了在可重... 目录简介ReadView版本链演示过程总结简介MVCC（Multi-Version Concurr
阅读更多...
C#使用DeepSeek API实现自然语言处理,文本分类和情感分析

C#使用DeepSeek API实现自然语言处理,文本分类和情感分析

《C#使用DeepSeekAPI实现自然语言处理,文本分类和情感分析》在C#中使用DeepSeekAPI可以实现多种功能,例如自然语言处理、文本分类、情感分析等,本文主要为大家介绍了具体实现步骤,... 目录准备工作文本生成文本分类问答系统代码生成翻译功能文本摘要文本校对图像描述生成总结在C#中使用Deep
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2