网络知识 科技 vue3源码分析——实现组件通信provide,inject

vue3源码分析——实现组件通信provide,inject

引言

<<往期回顾>>

  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是否存在,不存在则往上查找

返回顶部