除了 js 已有的功能外,vue還具有自己獨特的作用域級別。作用域控制可以使用哪些變數以及在何處使用。它控制它們對應用程式的不同部分的「可見性」。
了解 vue 提供的作用域級別之間的差異會幫助我們編寫更清晰的**。
下面是 vue 中4個級別的作用域:
來看看這些作用域分別是什麼。
vue 應用程式中的全域性作用域與任何程式語言中的全域性作用域類似,這些變數在應用程式中的任何地方都是可用的。
可以把全域性作用域看作應用程式作用域,因為它將作用域限制為整個應用程式。
使用全域性作用域
使用全域性作用域的主要方式是向vue原型新增乙個值:
vue.prototype.$globalvalue = 'global scope!';
通過將其新增到 vue 物件的原型中,可以在應用程式的每個元件上自動使用它。可以像這樣直接從元件訪問它:
export default ,};
使用$作為這些變數的字首是一種標準做法,因此我們知道它們是全域性值,而不是每個元件唯一的。
vue、vue-router和vuex(以及許多其他庫)都使用這種技術來定義全域性值。例如,來自vue-router的$route物件是這樣乙個全域性作用域的變數。
大多數時候,全域性範圍有點像大錘,我們需要一些更精確的東西。子樹作用域中的變數作用域是應用程式的特定部分,而不是整個應用程式。
此級別的作用域可能是最少使用的,但是在確實需要使用時非常方便。通常,一組元件需要共享很多相同的資料,並且通過props傳遞資料非常繁瑣。
此作用域最適合用於共享上下文資訊,這些上下文資訊可以根據元件在應用程式中的位置進行更改,可以是這樣的:
使用子樹作用域
子樹作用域是通過使用provide和inject建立的。我們提供希望可用於整個子樹的值,然後將它們注入需要它們的元件中。
更具體一點,元件作用域使變數可用於單個元件。但是這不應該與更具體的例項作用域相混淆。
如果乙個變數具有元件作用域,那麼它就是乙個元件的所有例項都可以使用的單個變數。我們可以擁有幾個相同的元件,並且它們都能夠訪問相同的變數。
你可能熟悉 js 中的模組作用域。在單個模組或檔案中定義的任何內容都屬於相同的模組作用域。由於元件是在單個檔案中定義的,所以元件中的所有內容都在相同的模組作用域內。
使用元件作用域
要使用元件作用域,我們需要在與元件相同的檔案中定義乙個變數:
在此元件中渲染的變數componentscope是相同的變數,不管使用此元件多少次,componentscope 始終只有乙個,沒有多個副本。
如果此元件的乙個例項修改了componentscope的值,則該元件的每個其他例項都會更改。不應使用這種方式在元件之間進行通訊,但這是共享資料的一種好方法。
例項作用域是我們可以獲得的vue作用域變數最常見形式,具有例項作用域的任何變數僅可用於元件的特定用法。我們通常將其稱為內部狀態,有時也稱為區域性狀態。
使用例項作用域
無論何時使用data()函式或使用computed props,都是在使用例項作用域。
甚至直接向元件例項新增屬性也可以達到以下效果:
somemethod()
但是,如果以這種方式新增屬性,則必須記住,它們不是響應式的。
原文:
vue中v model是個啥?
v model實際上只是一種語法糖,有時需要我們自定義去雙向繫結資料,這時候就需要對v model的實質有一定的了解了 當我們這樣寫時 something 複製 其實寫的是這樣乙個內容 something input something arguments 0 複製 所以當你想對乙個子元件的內容和父...
vue 4 計算屬性 監聽屬性
div newvue script 例項 1中模板變的很複雜起來,也不容易看懂理解。接下來我們看看使用了計算屬性的例項 原始字串 p 計算後反轉字串 p div var vm newvue computed script computed 與 methods 我們可以使用 methods 來替代 c...
vue中監聽屬性
監聽屬性可以針對某個屬性進行監聽,當監聽的屬性的值發生了變化,則會執行相應的函式。監聽的函式要寫在vue的watch屬性中。doctype html html lang en head meta charset utf 8 meta name viewport content width devic...