vue中provide和inject怎么實現原理對抗平庸

本篇內容主要講解“vue中provide和inject怎么實現原理對抗平庸”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中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！

到此，相信大家對“vue中provide和inject怎么實現原理對抗平庸”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！