一文搞懂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实现原理的资料请关注脚本之家其它相关文章！
相关文章
vue3使用threejs实现3D卡片水平旋转效果的示例代码
这篇文章主要介绍了在vue3中使用threejs实现3D卡片水平旋转效果,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-04-04
列表页面显示数据，点击跳转到对应的详情页，详情页可以添加并跳转到购物车，购物车具有常见功能，这篇文章主要介绍了vue 实现列表跳转至详情且能添加至购物车,需要的朋友可以参考下2022-10-10
详解vuex数据传输的两种方式及this.$store undefined的解决办法
这篇文章主要介绍了vuex数据传输的两种方式 及 this.$store undefined的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了Vue中的高德轨迹回放问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
如何使用 Vue Router 的 meta 属性实现多种功能
在Vue.js中,Vue Router 提供了强大的路由管理功能,通过meta属性,我们可以在路由定义中添加自定义元数据,以实现访问控制、页面标题设置、角色权限管理、页面过渡效果,本文将总结如何使用 meta 属性来实现这些常见的功能,感兴趣的朋友一起看看吧2024-06-06
大家在写vue项目的时候会遇到给组件的各种命名，接下来通过本文给大家分享vue组件name的作用小结，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
vue demi支持sfc方式的vue2vue3通用库开发详解
这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
在网页设计中,背景全屏是一种常见的视觉效果,通过正确的CSS样式设置,可以实现背景全屏且内容在固定一屏大小内完全显示,如果内容超出一屏,则可以通过滚动条查看剩余内容,这种设计可以提升用户的浏览体验,使网页看起来更加整洁和专业2024-10-10
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
这篇文章主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
最新评论