做者: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-router
和vuex
(以及許多其餘庫)都使用這種技術來定義全局值。例如,來自vue-router
的$route
對象是這樣一個全局做用域的變量。
大多數時候,全局範圍有點像大錘,咱們須要一些更精確的東西。子樹做用域中的變量做用域是應用程序的特定部分,而不是整個應用程序。
此級別的做用域多是最少使用的,可是在確實須要使用時很是方便。 一般,一組組件須要共享不少相同的數據,而且經過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...
我是小智,公衆號「大遷世界」做者,對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨,在進階的路上,共勉!
關注公衆號,後臺回覆福利,便可看到福利,你懂的。