小編給大家分享一下vue.js中的4個(gè)級(jí)別作用域分別是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、霞山網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為霞山等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

除了 JS 已有的功能外，Vue還具有自己獨(dú)特的作用域級(jí)別。作用域控制可以使用哪些變量以及在何處使用。它控制它們對(duì)應(yīng)用程序的不同部分的“可見性”。

了解 Vue 提供的作用域級(jí)別之間的差異會(huì)幫助我們編寫更清晰的代碼。

下面是 vue 中4個(gè)級(jí)別的作用域：

• 全局作用域

• 子樹作用域

• 組件作用域

• 實(shí)例作用域

來看看這些作用域分別是什么。

全局作用域

Vue 應(yīng)用程序中的全局作用域與任何編程語言中的全局作用域類似，這些變量在應(yīng)用程序中的任何地方都是可用的。

可以把全局作用域看作應(yīng)用程序作用域，因?yàn)樗鼘⒆饔糜蛳拗茷檎麄€(gè)應(yīng)用程序。

使用全局作用域

使用全局作用域的主要方式是向Vue原型添加一個(gè)值：

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

通過將其添加到 Vue 對(duì)象的原型中，可以在應(yīng)用程序的每個(gè)組件上自動(dòng)使用它。可以像這樣直接從組件訪問它：

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

使用$作為這些變量的前綴是一種標(biāo)準(zhǔn)做法，因此我們知道它們是全局值，而不是每個(gè)組件的。

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

子樹作用域

大多數(shù)時(shí)候，全局范圍有點(diǎn)像大錘，我們需要一些更精確的東西。子樹作用域中的變量作用域是應(yīng)用程序的特定部分，而不是整個(gè)應(yīng)用程序。

此級(jí)別的作用域可能是最少使用的，但是在確實(shí)需要使用時(shí)非常方便。 通常，一組組件需要共享很多相同的數(shù)據(jù)，并且通過props傳遞數(shù)據(jù)非常繁瑣。

此作用域最適合用于共享上下文信息，這些上下文信息可以根據(jù)組件在應(yīng)用程序中的位置進(jìn)行更改，可以是這樣的：

• 本地狀態(tài)和數(shù)據(jù)-如果只有一小部分應(yīng)用程序需要使用 Vuex，則無需使用 Vuex。 如果使用props傳遞會(huì)變得繁瑣且麻煩，此時(shí)，子樹作用域可能是我們好的選擇。

• 配置-有時(shí)我們需要組件以某種特定方式運(yùn)行，但僅在應(yīng)用程序的一部分中運(yùn)行。 例如，注冊(cè)表單中的所有Input組件都需要驗(yàn)證，但是我們不想在整個(gè)應(yīng)用程序中都要求驗(yàn)證。

使用子樹作用域

子樹作用域是通過使用provide和inject創(chuàng)建的。 我們提供希望可用于整個(gè)子樹的值，然后將它們注入需要它們的組件中。

組件作用域

更具體一點(diǎn)，組件作用域使變量可用于單個(gè)組件。但是這不應(yīng)該與更具體的實(shí)例作用域相混淆。

如果一個(gè)變量具有組件作用域，那么它就是一個(gè)組件的所有實(shí)例都可以使用的單個(gè)變量。我們可以擁有幾個(gè)相同的組件，并且它們都能夠訪問相同的變量。

你可能熟悉 JS 中的模塊作用域。在單個(gè)模塊或文件中定義的任何內(nèi)容都屬于相同的模塊作用域。由于組件是在單個(gè)文件中定義的，所以組件中的所有內(nèi)容都在相同的模塊作用域內(nèi)。

使用組件作用域

要使用組件作用域，我們需要在與組件相同的文件中定義一個(gè)變量：

在此組件中渲染的變量componentScope是相同的變量，不管使用此組件多少次，componentScope 始終只有一個(gè)，沒有多個(gè)副本。

如果此組件的一個(gè)實(shí)例修改了componentScope的值，則該組件的每個(gè)其他實(shí)例都會(huì)更改。 不應(yīng)使用這種方式在組件之間進(jìn)行通信，但這是共享數(shù)據(jù)的一種好方法。

實(shí)例作用域

實(shí)例作用域是我們可以獲得的Vue作用域變量最常見形式，具有實(shí)例作用域的任何變量?jī)H可用于組件的特定用法。 我們通常將其稱為內(nèi)部狀態(tài)，有時(shí)也稱為局部狀態(tài)。

使用實(shí)例作用域

無論何時(shí)使用data()函數(shù)或使用computed props，都是在使用實(shí)例作用域。

甚至直接向組件實(shí)例添加屬性也可以達(dá)到以下效果：

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

但是，如果以這種方式添加屬性，則必須記住，它們不是響應(yīng)式的。

以上是“vue.js中的4個(gè)級(jí)別作用域分別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：vue.js中的4個(gè)級(jí)別作用域分別是什么-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/docoid.html