vue 中4個級別的做用域

做者：Michael Thiessen
譯者：前端小智
來源：Michael

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

---

除了 JS 已有的功能外，Vue還具備本身獨特的做用域級別。做用域控制可使用哪些變量以及在何處使用。它控制它們對應用程序的不一樣部分的「可見性」。

瞭解 Vue 提供的做用域級別之間的差別會幫助咱們編寫更清晰的代碼。

下面是 vue 中4個級別的做用域：

• 全局做用域
• 子樹做用域
• 組件做用域
• 實例做用域

來看看這些做用域分別是什麼。

全局做用域

Vue 應用程序中的全局做用域與任何編程語言中的全局做用域相似，這些變量在應用程序中的任何地方都是可用的。

能夠把全局做用域看做應用程序做用域，由於它將做用域限制爲整個應用程序。

使用全局做用域

使用全局做用域的主要方式是向Vue原型添加一個值：

Vue.prototype.$globalValue = 'Global Scope!';

經過將其添加到 Vue 對象的原型中，能夠在應用程序的每一個組件上自動使用它。能夠像這樣直接從組件訪問它：

export default {
  mounted() {
    console.log(this.$globalValue);  // 'Global Scope!'
  },
};

使用$做爲這些變量的前綴是一種標準作法，所以咱們知道它們是全局值，而不是每一個組件惟一的。

Vue、vue-router和vuex(以及許多其餘庫)都使用這種技術來定義全局值。例如，來自vue-router的$route對象是這樣一個全局做用域的變量。

子樹做用域

大多數時候，全局範圍有點像大錘，咱們須要一些更精確的東西。子樹做用域中的變量做用域是應用程序的特定部分，而不是整個應用程序。

此級別的做用域多是最少使用的，可是在確實須要使用時很是方便。 一般，一組組件須要共享不少相同的數據，而且經過props傳遞數據很是繁瑣。

此做用域最適合用於共享上下文信息，這些上下文信息能夠根據組件在應用程序中的位置進行更改，能夠是這樣的：

• 本地狀態和數據-若是隻有一小部分應用程序須要使用 Vuex，則無需使用 Vuex。 若是使用props傳遞會變得繁瑣且麻煩，此時，子樹做用域多是咱們最好的選擇。
• 配置-有時咱們須要組件以某種特定方式運行，但僅在應用程序的一部分中運行。 例如，註冊表單中的全部Input組件都須要驗證，可是咱們不想在整個應用程序中都要求驗證。

使用子樹做用域

子樹做用域是經過使用provide和inject建立的。 咱們提供但願可用於整個子樹的值，而後將它們注入須要它們的組件中。

組件做用域

更具體一點，組件做用域使變量可用於單個組件。可是這不該該與更具體的實例做用域相混淆。

若是一個變量具備組件做用域，那麼它就是一個組件的全部實例均可以使用的單個變量。咱們能夠擁有幾個相同的組件，而且它們都可以訪問相同的變量。

你可能熟悉 JS 中的模塊做用域。在單個模塊或文件中定義的任何內容都屬於相同的模塊做用域。因爲組件是在單個文件中定義的，因此組件中的全部內容都在相同的模塊做用域內。

使用組件做用域

要使用組件做用域，咱們須要在與組件相同的文件中定義一個變量：

<template>
  <div class="new-component">
    {{ componentScope }}
  </div>
</template>

<script>
const componentScope = 'This is in the component scope';

export default {
  data() {
    return {
      componentScope: componentScope,
    };
  },
};
</script>

在此組件中渲染的變量componentScope是相同的變量，無論使用此組件多少次，componentScope 始終只有一個，沒有多個副本。

若是此組件的一個實例修改了componentScope的值，則該組件的每一個其餘實例都會更改。 不該使用這種方式在組件之間進行通訊，但這是共享數據的一種好方法。

實例做用域

實例做用域是咱們能夠得到的Vue做用域變量最多見形式，具備實例做用域的任何變量僅可用於組件的特定用法。 咱們一般將其稱爲內部狀態，有時也稱爲局部狀態。

使用實例做用域

不管什麼時候使用data()函數或使用computed props，都是在使用實例做用域。

甚至直接向組件實例添加屬性也能夠達到如下效果：

someMethod() {
  this.newProperty = 'Instance scope';
}

可是，若是以這種方式添加屬性，則必須記住，它們不是響應式的。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://frontendsociety.com/w...

---

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。