引言

<<往期回顾>>

1. vue3源码分析——rollup打包monorepo
2. vue3源码分析——实现组件的挂载流程
3. vue3源码分析——实现props,emit，事件处理等
4. vue3源码分析——实现slots

本期来实现， vue3组件通信的provide，inject，所有的源码请查看

getCurrentInstance

在实现provide/inject之前，先来实现getCurrentInstance,由于在provide/inject中会使用到这个api,在开发的时候，这个api使用的频率也是挺频繁的。

getCurrentInstance 是获取当前组件的实列，并且只能在setup函数中使用

测试用例

test('test getCurrentInstance', () => {n const Foo = {n name: 'Foo',n setup() {n // 获取子组件的实列，并且期望是子组件的名称是Foon const instance = getCurrentInstance();n expect(instance.type.name).toBe('Foo');n return {n count: 1n }n },n render() {n return h('div', {}, '122')n }n }nn const app = createApp({n name: 'App',n setup() {n // 获取父组件的实例，期待父组件的名称是定义的Appn const instance = getCurrentInstance();n expect(instance.type.name).toBe('App');n return {n count: 2n }n },n render() {n return h('div', { class: 'container' }, [h(Foo, {}, {})])n }n })n // 挂载组件n const appDoc = document.querySelector('#app')n app.mount(appDoc);n })n

分析

在上面的测试拥立中，可以得到以下内容：

1. getCurrentInstance只能在setup函数中使用
2. 对外导出的api,获取的是当前组件的实列

问题解决：

对于上面两个问题，只需要导出一个函数，并且在全局定义一个变量，在setup执行的时候，赋值全局变量即可拿到当前组件的实例，然后setup执行之后，清空即可

编码

// setup执行是在setupStatefulComponent函数中执行的，来进行改造nn// 定义全局的变量，存储当前实例nlet currentInstance = null;nfunction setupStatefulComponent(instance: any) {n // ……省略其他n // 获取组件的setupn const { setup } = Component;n if (setup) {n currentInstance = instancen const setupResult = setup(shallowReadonly(instance.props), { emit: instance.emit })n // 情况操作n currentInstance = nulln }n // ……省略其他n }nnn// 对外导出函数，提供全局的apinexport function getCurrentInstance() {n return currentInstancen}n

getCurrentInstance 有没有想到实现方式这么简单哇！

provide/inject

provide和inject需要配套使用才方便用于测试，这里就从功能分析，来逐步完成这两个api.

父子组件传值

父子组件传值可以使用props/emit来实现，还记得是怎么实现的么？

测试用例

test('test provide basic use', () => {n const Foo = {n name: 'Foo',n setup() {n // 子组件接受数据n const count = inject('count')n const str = inject('str')n return {n count,n strn }n },n render() {n return h('div', {}, this.str + this.count)n }n }nn const app = createApp({n name: 'App',n setup() {n // 父组件提供数据，n provide('count', 1);n provide('str', 'str');n },n render() {n return h('div', { class: 'container' }, [h(Foo, {})])n }n })nn const appDoc = document.querySelector('#app')n app.mount(appDoc);n const container = document.querySelector('.container') as HTMLElement;n expect(container.innerHTML).toBe('<div>str1</div>')n })n

分析

从上面的测试用例中进行需求分析，

1. provide api是需要有两个参数，一个key,另一个是value, 有点类似与sessionStorage这种set值的方式
2. inject api则是只需要一个key,来进行get操作
3. provide存的数据，存在哪里呢？

问题解决： 问题1和问题2都很好解决，对外导出函数，传递对应的参数，只是数据存储在哪里的问题，经过仔细的思考，会发现，组件的数据是需要进行共享的，父组件存入的数据，里面的所有子组件和孙子组件都可以共享，那么存储在实例上，是不是一个不错的选择呢？ inject 是获取父级组件的数据，那么在实列上还需要传入parent

编码

由于需要在实例上存储provide,首先就在createInstance中的实例，在初始化就赋值nnexport function createComponentInstance(vnode, parent) {n const instance = {n // ……省略其他属性n // 提供数据n provides: {},n parent,n }n return instancen}nn// 有了实例，分别创建provide，inject函数nnexport function provide(key, val){n // 将数据存在实例上，先进行获取n const instance = getCurrentInstance();n if(instance){n instance.provides[key] = valn }n}nnexport function inject(key){n // 从实列上取值n const instance = getCurrentInstance();n if(instance){n // 获取父级providesn const provides = instance.parent?.provides;n if(key in provides){n return provides[key]n }n return nulln }n}n

一个简单的prvide/inject就实现啦，接下来进行需求升级，爷孙组件数据传递

爷孙组件传值

无可厚非，就是孙子组件需要从爷爷组件中获取值，父组件不提供数据

测试用例

test('test provide exit grandfather', () => {n const Child = {n name: 'Foo',n setup() {n // 孙子组件也可以取值n const count = inject('count')n const str = inject('str')n return {n count,n strn }n },n render() {n return h('div', {}, this.str + this.count)n }n }nn const Father = {n name: 'Father',n setup() {n // 子组件可以取值n const count = inject('count')n return {n countn }n },n render() {n return h('div', {}, [h('p', {}, this.count), h(Child, {})])n }n }nn const app = createApp({n name: 'App',n setup() {n // 爷爷提供数据n provide('count', 1);n provide('str', 'str');n return {}n },n render() {n return h('div', { class: 'container' }, [h(Father, {})])n }n })nn const appDoc = document.querySelector('#app');n app.mount(appDoc);n const container = document.querySelector('.container') as HTMLElement;n expect(container.innerHTML).toBe('<div><p>1</p><div>str1</div></div>')n })n

分析

上面的测试用例相对于父子组件的测试用例来说，增加了一个孙子组件。

1. 孙子（Child组件） 和 父亲（Foo组件） 都可以获取 爷爷（App组件) 的值
2. 其他的没啥变化

问题解决： 想要让孙子组件获取爷爷组件的数据，那是否可以让父组件Foo在初始化就获取他父组件App的provides

编码

// 需要在组件初始化的时候，获取父组件的数据,修改下初始化的内容nexport function createComponentInstance(vnode, parent) {n const instance = {n // ……省略其他属性n // 存在则用，不存在还是空对象n provides: parent ? parent.provides : {},n parent,n }n return instancen}n

是不是感觉非常简单哇，那接下来在升级下，inject获取provide的数据，需要就近原则来进行获取

就近原则获取数据

就近原则的意思是说，如果父组件有就拿父组件的，父组件没有就那爷爷组件的，爷爷组件没有继续往上找，直到找到跟组件App上，如果还没有就为null

测试用例

test('get value by proximity principle(就近原则) ', () => {n // 孙子组件来获取数据n const GrandSon = {n name: 'GrandSon',n setup() {n const count = inject('count')n const str = inject('str')n return {n count,n strn }n },n render() {n return h('div', {}, this.str + this.count)n }n }n // 子组件提供countn const Child = {n name: 'Child',n setup() {n provide('count', 100)n },n render() {n return h(GrandSon)n }n }n // 父亲组件，不提供数据n const Father = {n name: 'Father',n render() {n return h(Child)n }n }n // 跟组件app,提供，count，strn const app = createApp({n name: 'App',n setup() {n provide('count', 1);n provide('str', 'str');n return {}n },n render() {n return h('div', { class: 'container' }, [h(Father, {})])n }n })n // ……省略挂载n const container = document.querySelector('.container') as HTMLElement;n expect(container.innerHTML).toBe('<div>str100</div>')n })n

分析

在上面的测试用例中，存在4个组件，只有app组件和Child组件提供数据，其他只是嵌套，不提供数据。存在下面问题：

1. inject怎么去查找provides的数据，一层一层的查找

问题解决： 怎么查找呢，在inject里面递归？ NO,换一个角度，inject查找数据的时候，是不是有点像原型链的方式来进行查找呢？YES,那就是需要在provide里面来构建一条原型链。

原型链, 啥叫做原型链呢？请查看

编码

// 只需要改造provide函数即可nexport function provide(key, val) {n // 数据需要存储在当前的实例上面n const instance = getCurrentInstance();nn if (instance) {n let { provides } = instance;n // 正对多层组件，需要把当前组件的__proto__绑定到父级上面，形成原型链，可以访问到最顶层的数据n const parentProvides = instance.parent && instance.parent.provide;n // 只有父级的provides和当前的provides是相同的时候为第一次调用provide,后续调用就不需要绑定原型了n if (parentProvides === provides) {n provides = instance.providers = Object.create(parentProvides || {});n }n provides[key] = val;n }n}n

总结

本期主要完成了getCurrentInstance,provide,inject的实现，在getCurrentInstance中只是用了一个中间变量，而provide是把数据存在当前的instance当中，provide里面还用到了原型链的知识，通过原型的方式来查询key是否存在,不存在则往上查找