一文搞懂vue中provide和inject实现原理对抗平庸
作者：陪我去看海
前言
在没有面试又似乎马上就会有面试的躁动不安的日子里，迷迷糊糊的看到一个面试题“你知道provide和inject的实现原理吗”，我学着面试官的样子试问自己"你知道吗"，我的大脑翻遍了记忆，也没有找到，可能是没有记载，亦可能是时间过长被积压在了记忆深处，我始终没有回答我自己，这让我非常懊恼，又满是无奈。所以我想搞懂它，用它的原理来抚平我的内心。
provide & inject 的用法
provide("num", 0);
const num = inject("num")
这大致就是它们的美貌，它们示人的一面，如此优雅，如此简洁。它们隐藏了内心，从这里让我无法了解到它的内心它到底在想什么呢，在做什么呢，我尝试着与它亲近，逐渐发现它的有趣。
在provide中，它留了两个深入了解它的窗口provide(key, value)，同样在inject中，目前只能看到一个inject(key)，结合它们的功能知道，它们的主要功能不就是存和取，所以想要了解它们就要搞清楚如何存，怎么取，先让这疑问留在心底罢，来看看"下面例子"
下面例子
有这样一串代码，让我们实现provide 和 inject这两个函数，达到在foo对象中的fooObj取的是app对象中provide提供的对象obj，我们如何实现
const obj = { name: "app" };
const foo = {
name: "foo",
provides: {},
parent: null,
setup() {
foo.parent = app; // 先忽略
const fooObj = inject("obj");
console.log("app -> foo: obj ", fooObj === obj); // 要求打印true
},
children: null,
};
const app = {
name: "app",
provides: {},
parent: null,
setup() {
app.parent = app; // 先忽略
provide("obj", obj);
},
children: foo,
};
(function () {
app.setup();
foo.setup();
})();
需要实现什么
首先我们需要明确我们要干什么：
- 其实本质就是要实现provide和inject函数
- 明确代码在做什么
- 有两个对象app 和 foo，它两长得一样美丽，初始化阶段，它两内部的setup方法会依次执行，在内部它们分别使用了provide提供数据，以及使用inject获取数据，要求fooObj === obj为true，这其实就是判断是否是同一个数据的根本方法。
知道了这些后，我们一起来认识一下provide和inject吧，我们以主观意识去了解它们，把我认为它是什么样子画出来。
首先画出它的骨架：
function provide(key, value) {
// 灵魂深处
}
function inject(key) {
// 灵魂深处
}
我们要一起探听我们理想中它们的灵魂
内心中的呈现
provide分析
- 提供了key-value
- 我们需要存储在各自对象中的provides属性中
function provide(key, value) {
// 获取当前提供provide的对象
const currentInstance = app;
// 将provide提供的key-value存储到当前对象的provides中
let { provides } = currentInstance;
provides[key] = value;
}
inject分析
- 从parent下的provides开始取值，因为在自己这里提供的provide不需要进行inject，多此一举
function inject(key) {
const currentInstance = foo;
// 从parent的provides取值
const parentProvides = currentInstance.parent.provides;
// 如果提供了值，就可以取到并返回
if (key in parentProvides) {
return parentProvides[key];
}
}
这时候我们可以打印出(fooObj === obj) === true了
在沉浸喜悦的同时，在provide和inject灵魂处蹦出字来你还是不够了解我，我仔细思考，好像也是，它们还有一个特性就是跨层级，这恰恰是遗忘了它最有灵魂的地方，所以我们重新规划下面例子
下面例子
const obj = { name: "app" };
const baz = {
name: "foo",
provides: {},
parent: null,
setup() {
baz.parent = foo;
const bazObj = inject("obj");
console.log("app -> baz: obj ", bazObj === obj); // 要求打印true
},
children: null,
};
const foo = {
name: "foo",
provides: {},
parent: null,
setup() {
foo.parent = app;
},
children: baz,
};
const app = {
name: "app",
provides: {},
parent: null,
setup() {
app.parent = app;
provide("obj", obj);
},
children: foo,
};
(function () {
app.setup();
foo.setup();
baz.setup();
})();
这时候就会打印false了PS: 如果你还是true，那是因为你在 inject 里 currentInstance没有改变，这里是需要改变的，只能指到当前对象，所以我们如何解决呢？
这里说到如果currentInstance 是 foo，那就没有问题，但是又因为这里是只能指向当前对象的，所以不能直接赋值，突然，灵光一闪，无非不就是查找的时候需要继续向下查找，这不是和原型链一样嘛内心：哈哈哈，我真聪明，所以我们给它进行原型连接不就好了，让一直向parent上找，直到找不到。
跨层级查找
进行原型连接，实现跨层级：Object.create(obj): 创造一个原型为obj的空对象
const foo = {
name: "foo",
provides: {},
parent: null,
setup() {
foo.parent = app;
// 执行原型连接
foo.provides = Object.create(foo.parent.provides);
},
children: baz,
};
这样就又打印true了，因为它直接在foo.provides上查找，无法找到提供的obj所以会undefined，原型连接后，查找会顺着原型链查找，直到找不到，那找不到的时候怎么办呢，它会报错的呀，这是不能容忍的，所以inject向我敞开心扉，和我聊自己是怎么样的一个API，它说："我其实有三种外貌，对应不同心情，分别是inject(key)、inject(key, defaultValue)和 defaultValue 可以是函数"，至此我们之间的关系好像又进一步，我好像更了解它们了。
inject放下伪装，吐露心声
inject 的形态：
- inject(key) —— 已实现
- inject(key, defaultValue) —— 未实现
- inject(key, () => defaultValue) —— 未实现
回顾一下inject：
function inject(key) {
const currentInstance = baz;
const parentProvides = currentInstance.parent.provides;
if (key in parentProvides) {
return parentProvides[key];
}
}
这是我们最后实现inject的样子，这会inject告诉了我们其他状态，所以我们需要和它更进一步，它会提供一个defaultValue属性，所以我们在parent链中没有找到key的时候，就需要赋值defaultValue了
function inject(key, defaultValue) {
const currentInstance = baz;
const parentProvides = currentInstance.parent.provides;
// 当没有在 parent 链中找到对应key，就返回默认值
if (key in parentProvides) {
return parentProvides[key];
} else if (defaultValue) {
return defaultValue;
}
}
将baz对象修改为：
const baz = {
name: "foo",
provides: {},
parent: null,
setup() {
baz.parent = foo;
const defaultBaz = inject("baz", "我是默认值啦!");
console.log(defaultBaz, "baz");
},
children: null,
};
打印出了：我是默认值啦!
但是当defaultValue是回调函数的时候，我们所以需要添加判断条件，如果是回调函数，那就直接执行。
修改后的inject：
function inject(key, defaultValue) {
const currentInstance = baz;
const parentProvides = currentInstance.parent.provides;
if (key in parentProvides) {
return parentProvides[key];
} else if (defaultValue) {
// 新增判断
if (typeof defaultValue === "function") {
return defaultValue();
}
return defaultValue;
}
}
修改后的baz中的inject使用:
const defaultBaz = inject("baz", () => "我是默认值啦!");
同样也会打印出：我是默认值啦!
现在我们好像成为好朋友了，所以，你好，provide！你好，inject！你们好，各位大帅b！
总结
- 每个provide提供的数据都存在当前组件的provides属性上
- inject取值的时候，会从当前的父组件中的provides开始取值
- 其实已经懂了 provide 和 inject 原理了，因为在Vue中，他的每个组件也会生成组件实例，而这些属性全都在实例对象上。
以上就是一文搞懂vue中provide和inject实现原理对抗平庸的详细内容，更多关于vue provide inject实现原理的资料请关注脚本之家其它相关文章！