vue 中4個級別的做用域

做者:Michael Thiessen
譯者:前端小智
來源:Michael
點贊再看,養成習慣

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


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

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

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

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

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

全局做用域

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

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

使用全局做用域

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

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

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

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

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

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

子樹做用域

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

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

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

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

使用子樹做用域

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

組件做用域

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

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

你可能熟悉 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...

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

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

clipboard.png

相關文章
相關標籤/搜索