Vue组件通信原理剖析(三)provide/inject原理分析

本文主要是介绍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和 onemit和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和 onemit
Vue组件通信原理剖析(二)全局状态管理Vuex
Vue组件通信原理剖析(三)provide/inject原理分析

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

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



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

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,:本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖?1.2 核心危害二、Spring的三级缓存机制2.1 三

C#中async await异步关键字用法和异步的底层原理全解析

《C#中asyncawait异步关键字用法和异步的底层原理全解析》:本文主要介绍C#中asyncawait异步关键字用法和异步的底层原理全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录C#异步编程一、异步编程基础二、异步方法的工作原理三、代码示例四、编译后的底层实现五、总结C#异步编程

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行