除了 JS 已有的功能外，Vue還具有自己獨特的作用域級別。作用域控制可以使用哪些變量以及在何處使用。它控制它們對應用程序的不同部分的“可見性”。
瞭解 Vue 提供的作用域級別之間的差異會幫助我們編寫更清晰的代碼。
下面是 vue 中4個級別的作用域：
- 全局作用域
- 子樹作用域
- 組件作用域
- 實例作用域
來看看這些作用域分別是什麼。
全局作用域
Vue 應用程序中的全局作用域與任何編程語言中的全局作用域類似，這些變量在應用程序中的任何地方都是可用的。
可以把全局作用域看作應用程序作用域，因為它將作用域限制為整個應用程序。
使用全局作用域
使用全局作用域的主要方式是向Vue原型添加一個值：
<code>Vue.prototype.$globalValue = 'Global Scope!';/<code>
通過將其添加到 Vue 對象的原型中，可以在應用程序的每個組件上自動使用它。可以像這樣直接從組件訪問它：
<code>export default {
mounted() {
console.log(this.$globalValue); // 'Global Scope!'
},
};/<code>使用$作為這些變量的前綴是一種標準做法，因此我們知道它們是全局值，而不是每個組件唯一的。
Vue、vue-router和vuex(以及許多其他庫)都使用這種技術來定義全局值。例如，來自vue-router的$route對象是這樣一個全局作用域的變量。
子樹作用域
大多數時候，全局範圍有點像大錘，我們需要一些更精確的東西。子樹作用域中的變量作用域是應用程序的特定部分，而不是整個應用程序。
此級別的作用域可能是最少使用的，但是在確實需要使用時非常方便。 通常，一組組件需要共享很多相同的數據，並且通過props傳遞數據非常繁瑣。
此作用域最適合用於共享上下文信息，這些上下文信息可以根據組件在應用程序中的位置進行更改，可以是這樣的：
- 本地狀態和數據-如果只有一小部分應用程序需要使用 Vuex，則無需使用 Vuex。 如果使用props傳遞會變得繁瑣且麻煩，此時，子樹作用域可能是我們最好的選擇。
- 配置-有時我們需要組件以某種特定方式運行，但僅在應用程序的一部分中運行。 例如，註冊表單中的所有Input組件都需要驗證，但是我們不想在整個應用程序中都要求驗證。
使用子樹作用域
子樹作用域是通過使用provide和inject創建的。 我們提供希望可用於整個子樹的值，然後將它們注入需要它們的組件中。
組件作用域
更具體一點，組件作用域使變量可用於單個組件。但是這不應該與更具體的實例作用域相混淆。
如果一個變量具有組件作用域，那麼它就是一個組件的所有實例都可以使用的單個變量。我們可以擁有幾個相同的組件，並且它們都能夠訪問相同的變量。
你可能熟悉 JS 中的模塊作用域。在單個模塊或文件中定義的任何內容都屬於相同的模塊作用域。由於組件是在單個文件中定義的，所以組件中的所有內容都在相同的模塊作用域內。
使用組件作用域
要使用組件作用域，我們需要在與組件相同的文件中定義一個變量：
<code><template>
{{ componentScope }}
/<template>
/<code>
在此組件中渲染的變量componentScope是相同的變量，不管使用此組件多少次，componentScope 始終只有一個，沒有多個副本。
如果此組件的一個實例修改了componentScope的值，則該組件的每個其他實例都會更改。 不應使用這種方式在組件之間進行通信，但這是共享數據的一種好方法。
實例作用域
實例作用域是我們可以獲得的Vue作用域變量最常見形式，具有實例作用域的任何變量僅可用於組件的特定用法。 我們通常將其稱為內部狀態，有時也稱為局部狀態。
使用實例作用域
無論何時使用data()函數或使用computed props，都是在使用實例作用域。
甚至直接向組件實例添加屬性也可以達到以下效果：
<code>someMethod() {
this.newProperty = 'Instance scope';
}/<code>但是，如果以這種方式添加屬性，則必須記住，它們不是響應式的。
閱讀更多 前端小學生 的文章
