今天就跟大家聊聊有關(guān)vue 中有哪些作用域,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
我們提供的服務(wù)有:做網(wǎng)站、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、拜城ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的拜城網(wǎng)站制作公司
1. 全局作用域
Vue 應(yīng)用程序中的全局作用域與任何編程語言中的全局作用域類似,這些變量在應(yīng)用程序中的任何地方都是可用的。
可以把全局作用域看作應(yīng)用程序作用域,因為它將作用域限制為整個應(yīng)用程序。
使用全局作用域
使用全局作用域的主要方式是向Vue原型添加一個值:
Vue.prototype.$globalValue = 'Global Scope!';
通過將其添加到 Vue 對象的原型中,可以在應(yīng)用程序的每個組件上自動使用它。可以像這樣直接從組件訪問它:
export default { mounted() { console.log(this.$globalValue); // 'Global Scope!' }, };
使用$作為這些變量的前綴是一種標(biāo)準做法,因此我們知道它們是全局值,而不是每個組件唯一的。
Vue、vue-router和vuex(以及許多其他庫)都使用這種技術(shù)來定義全局值。例如,來自vue-router的$route對象是這樣一個全局作用域的變量。
2. 子樹作用域
大多數(shù)時候,全局范圍有點像大錘,我們需要一些更精確的東西。子樹作用域中的變量作用域是應(yīng)用程序的特定部分,而不是整個應(yīng)用程序。
此級別的作用域可能是最少使用的,但是在確實需要使用時非常方便。通常,一組組件需要共享很多相同的數(shù)據(jù),并且通過props傳遞數(shù)據(jù)非常繁瑣。
此作用域最適合用于共享上下文信息,這些上下文信息可以根據(jù)組件在應(yīng)用程序中的位置進行更改,可以是這樣的:
本地狀態(tài)和數(shù)據(jù)-如果只有一小部分應(yīng)用程序需要使用 Vuex,則無需使用 Vuex。如果使用props傳遞會變得繁瑣且麻煩,此時,子樹作用域可能是我們最好的選擇。
配置-有時我們需要組件以某種特定方式運行,但僅在應(yīng)用程序的一部分中運行。例如,注冊表單中的所有Input組件都需要驗證,但是我們不想在整個應(yīng)用程序中都要求驗證。
使用子樹作用域:
子樹作用域是通過使用provide和inject創(chuàng)建的。我們提供希望可用于整個子樹的值,然后將它們注入需要它們的組件中。
3. 組件作用域
更具體一點,組件作用域使變量可用于單個組件。但是這不應(yīng)該與更具體的實例作用域相混淆。
如果一個變量具有組件作用域,那么它就是一個組件的所有實例都可以使用的單個變量。我們可以擁有幾個相同的組件,并且它們都能夠訪問相同的變量。
你可能熟悉 JS 中的模塊作用域。在單個模塊或文件中定義的任何內(nèi)容都屬于相同的模塊作用域。由于組件是在單個文件中定義的,所以組件中的所有內(nèi)容都在相同的模塊作用域內(nèi)。
使用組件作用域:
要使用組件作用域,我們需要在與組件相同的文件中定義一個變量:
在此組件中渲染的變量componentScope是相同的變量,不管使用此組件多少次,componentScope 始終只有一個,沒有多個副本。
如果此組件的一個實例修改了componentScope的值,則該組件的每個其他實例都會更改。不應(yīng)使用這種方式在組件之間進行通信,但這是共享數(shù)據(jù)的一種好方法。
4. 實例作用域
實例作用域是我們可以獲得的Vue作用域變量最常見形式,具有實例作用域的任何變量僅可用于組件的特定用法。我們通常將其稱為內(nèi)部狀態(tài),有時也稱為局部狀態(tài)。
使用實例作用域:
無論何時使用data()函數(shù)或使用computed props,都是在使用實例作用域。
甚至直接向組件實例添加屬性也可以達到以下效果:
someMethod() { this.newProperty = 'Instance scope'; }
看完上述內(nèi)容,你們對vue 中有哪些作用域有進一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。