引言
<<往期回顾>>
- vue3源码分析——rollup打包monorepo
- vue3源码分析——实现组件的挂载流程
- vue3源码分析——实现props,emit，事件处理等
- vue3源码分析——实现slots
本期来实现， vue3组件通信的provide，inject，所有的源码请查看
getCurrentInstance
在实现provide/inject之前，先来实现getCurrentInstance,由于在provide/inject中会使用到这个api,在开发的时候，这个api使用的频率也是挺频繁的。
getCurrentInstance 是获取当前组件的实列，并且只能在setup函数中使用
测试用例
test('test getCurrentInstance', () => {
const Foo = {
name: 'Foo',
setup() {
// 获取子组件的实列，并且期望是子组件的名称是Foo
const instance = getCurrentInstance();
expect(instance.type.name).toBe('Foo');
return {
count: 1
}
},
render() {
return h('div', {}, '122')
}
}
const app = createApp({
name: 'App',
setup() {
// 获取父组件的实例，期待父组件的名称是定义的App
const instance = getCurrentInstance();
expect(instance.type.name).toBe('App');
return {
count: 2
}
},
render() {
return h('div', { class: 'container' }, [h(Foo, {}, {})])
}
})
// 挂载组件
const appDoc = document.querySelector('#app')
app.mount(appDoc);
})
分析
在上面的测试拥立中，可以得到以下内容：
- getCurrentInstance只能在setup函数中使用
- 对外导出的api,获取的是当前组件的实列
问题解决：
对于上面两个问题，只需要导出一个函数，并且在全局定义一个变量，在setup执行的时候，赋值全局变量即可拿到当前组件的实例，然后setup执行之后，清空即可
编码
// setup执行是在setupStatefulComponent函数中执行的，来进行改造
// 定义全局的变量，存储当前实例
let currentInstance = null;
function setupStatefulComponent(instance: any) {
// ……省略其他
// 获取组件的setup
const { setup } = Component;
if (setup) {
currentInstance = instance
const setupResult = setup(shallowReadonly(instance.props), { emit: instance.emit })
// 情况操作
currentInstance = null
}
// ……省略其他
}
// 对外导出函数，提供全局的api
export function getCurrentInstance() {
return currentInstance
}
getCurrentInstance 有没有想到实现方式这么简单哇！
provide/inject
provide和inject需要配套使用才方便用于测试，这里就从功能分析，来逐步完成这两个api.
父子组件传值
父子组件传值可以使用props/emit来实现，还记得是怎么实现的么？
测试用例
test('test provide basic use', () => {
const Foo = {
name: 'Foo',
setup() {
// 子组件接受数据
const count = inject('count')
const str = inject('str')
return {
count,
str
}
},
render() {
return h('div', {}, this.str + this.count)
}
}
const app = createApp({
name: 'App',
setup() {
// 父组件提供数据，
provide('count', 1);
provide('str', 'str');
},
render() {
return h('div', { class: 'container' }, [h(Foo, {})])
}
})
const appDoc = document.querySelector('#app')
app.mount(appDoc);
const container = document.querySelector('.container') as HTMLElement;
expect(container.innerHTML).toBe('str1')
})
分析
从上面的测试用例中进行需求分析，
- provide api是需要有两个参数，一个key,另一个是value, 有点类似与sessionStorage这种set值的方式
- inject api则是只需要一个key,来进行get操作
- provide存的数据，存在哪里呢？
问题解决： 问题1和问题2都很好解决，对外导出函数，传递对应的参数，只是数据存储在哪里的问题，经过仔细的思考，会发现，组件的数据是需要进行共享的，父组件存入的数据，里面的所有子组件和孙子组件都可以共享，那么存储在实例上，是不是一个不错的选择呢？ inject 是获取父级组件的数据，那么在实列上还需要传入parent
编码
由于需要在实例上存储provide,首先就在createInstance中的实例，在初始化就赋值
export function createComponentInstance(vnode, parent) {
const instance = {
// ……省略其他属性
// 提供数据
provides: {},
parent,
}
return instance
}
// 有了实例，分别创建provide，inject函数
export function provide(key, val){
// 将数据存在实例上，先进行获取
const instance = getCurrentInstance();
if(instance){
instance.provides[key] = val
}
}
export function inject(key){
// 从实列上取值
const instance = getCurrentInstance();
if(instance){
// 获取父级provides
const provides = instance.parent?.provides;
if(key in provides){
return provides[key]
}
return null
}
}
一个简单的prvide/inject就实现啦，接下来进行需求升级，爷孙组件数据传递
爷孙组件传值
无可厚非，就是孙子组件需要从爷爷组件中获取值，父组件不提供数据
测试用例
test('test provide exit grandfather', () => {
const Child = {
name: 'Foo',
setup() {
// 孙子组件也可以取值
const count = inject('count')
const str = inject('str')
return {
count,
str
}
},
render() {
return h('div', {}, this.str + this.count)
}
}
const Father = {
name: 'Father',
setup() {
// 子组件可以取值
const count = inject('count')
return {
count
}
},
render() {
return h('div', {}, [h('p', {}, this.count), h(Child, {})])
}
}
const app = createApp({
name: 'App',
setup() {
// 爷爷提供数据
provide('count', 1);
provide('str', 'str');
return {}
},
render() {
return h('div', { class: 'container' }, [h(Father, {})])
}
})
const appDoc = document.querySelector('#app');
app.mount(appDoc);
const container = document.querySelector('.container') as HTMLElement;
expect(container.innerHTML).toBe('1
str1')
})
分析
上面的测试用例相对于父子组件的测试用例来说，增加了一个孙子组件。
- 孙子（Child组件） 和 父亲（Foo组件） 都可以获取 爷爷（App组件) 的值
- 其他的没啥变化
问题解决： 想要让孙子组件获取爷爷组件的数据，那是否可以让父组件Foo在初始化就获取他父组件App的provides
编码
// 需要在组件初始化的时候，获取父组件的数据,修改下初始化的内容
export function createComponentInstance(vnode, parent) {
const instance = {
// ……省略其他属性
// 存在则用，不存在还是空对象
provides: parent ? parent.provides : {},
parent,
}
return instance
}
是不是感觉非常简单哇，那接下来在升级下，inject获取provide的数据，需要就近原则来进行获取
就近原则获取数据
就近原则的意思是说，如果父组件有就拿父组件的，父组件没有就那爷爷组件的，爷爷组件没有继续往上找，直到找到跟组件App上，如果还没有就为null
测试用例
test('get value by proximity principle(就近原则) ', () => {
// 孙子组件来获取数据
const GrandSon = {
name: 'GrandSon',
setup() {
const count = inject('count')
const str = inject('str')
return {
count,
str
}
},
render() {
return h('div', {}, this.str + this.count)
}
}
// 子组件提供count
const Child = {
name: 'Child',
setup() {
provide('count', 100)
},
render() {
return h(GrandSon)
}
}
// 父亲组件，不提供数据
const Father = {
name: 'Father',
render() {
return h(Child)
}
}
// 跟组件app,提供，count，str
const app = createApp({
name: 'App',
setup() {
provide('count', 1);
provide('str', 'str');
return {}
},
render() {
return h('div', { class: 'container' }, [h(Father, {})])
}
})
// ……省略挂载
const container = document.querySelector('.container') as HTMLElement;
expect(container.innerHTML).toBe('str100')
})
分析
在上面的测试用例中，存在4个组件，只有app组件和Child组件提供数据，其他只是嵌套，不提供数据。存在下面问题：
- inject怎么去查找provides的数据，一层一层的查找
问题解决： 怎么查找呢，在inject里面递归？ NO,换一个角度，inject查找数据的时候，是不是有点像原型链的方式来进行查找呢？YES,那就是需要在provide里面来构建一条原型链。
原型链, 啥叫做原型链呢？请查看
编码
// 只需要改造provide函数即可
export function provide(key, val) {
// 数据需要存储在当前的实例上面
const instance = getCurrentInstance();
if (instance) {
let { provides } = instance;
// 正对多层组件，需要把当前组件的__proto__绑定到父级上面，形成原型链，可以访问到最顶层的数据
const parentProvides = instance.parent && instance.parent.provide;
// 只有父级的provides和当前的provides是相同的时候为第一次调用provide,后续调用就不需要绑定原型了
if (parentProvides === provides) {
provides = instance.providers = Object.create(parentProvides || {});
}
provides[key] = val;
}
}
总结
本期主要完成了getCurrentInstance,provide,inject的实现，在getCurrentInstance中只是用了一个中间变量，而provide是把数据存在当前的instance当中，provide里面还用到了原型链的知识，通过原型的方式来查询key是否存在,不存在则往上查找
