扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文搞懂vue中provide和inject实现原理对抗平庸
  • 359

0
分享到

一文搞懂vue中provide和inject实现原理对抗平庸

vue provide inject实现原理vue provide inject 2023-05-16 14:05:08 359人浏览 安东尼
摘要

目录前言provide & inject 的用法下面例子需要实现什么内心中的呈现下面例子跨层级查找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实现原理的资料请关注编程网其它相关文章！

--结束END--

本文标题: 一文搞懂vue中provide和inject实现原理对抗平庸

本文链接: https://lsjlt.com/news/209959.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作