vue 計算屬性

2022-03-18 11:03:12 字數 1577 閱讀 9324

模板內的表示式非常便利,但是設計它們的初衷是用於簡單運算的,比如簡單的三元判斷等。如果我們有乙個變數是一段複雜的邏輯運算,寫在了模板中,會讓我們的模板看起來很笨重,而且需要時間理解這段**到底寫了什麼?如果多個地方使用到這個變數,還會讓模板變得難以維護。vue為我們提供了計算屬性,可以很好的解決這個問題,對於任何複雜的邏輯運算,都應當使用計算屬性。

計算屬性放在選項computed中,每個屬性都有自己的getter(讀取)和setter(設定),如果不寫明的話預設是geter。而且計算屬性的結果會被快取,除非計算屬性依賴的響應式 property 變化才會重新計算,這對我們來說是個不錯的功能,如果我們有乙個計算很複雜的屬性x,將可以節省一筆很大的效能開銷。

我們從上述的**中發現,使用method和computed的計算屬性得到的結果是一樣的,我們可以將同乙個函式定義為乙個方法。但是計算屬性是基於他所依賴的響應式依賴進行快取的,只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要message還沒有發生改變,多次訪問reversedmessage計算屬性會立即返回之前的計算結果,而不必再次執行函式。相比之下,每當觸發重新渲染時,呼叫方法將總會再次執行函式。簡單的來說:如果希望可以快取這個屬性,可以使用計算屬性;如果不希望有快取,請使用方法method。

vue 提供了一種更通用的方式來觀察和響應 vue 例項上的資料變動:偵聽屬性。當你有一些資料需要隨著其它資料變動而變動時,你很容易濫用watch,但是很多情況下更好的做法是使用計算屬性而不是命令式的watch**。比如下面這個例子:

執行結果:

我們可以看到watch監聽了firstname和lastname,當其中的一方發生改變的時候,就會拼接相應的資料到fullname中。但是如果我們使用計算屬性的話,可以不必寫這麼複雜的**就能實現這個功能,看起來更加簡潔明瞭

雖然計算屬性在大多數情況下更合適,但有時也需要乙個自定義的偵聽器。這就是為什麼 vue 通過 watch 選項提供了乙個更通用的方法,來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時,這個方式是最有用的。官方有個例子:

ask a yes/no question:

}

在這個示例中,使用 watch 選項允許我們執行非同步操作 (訪問乙個 api),限制我們執行該操作的頻率,並在我們得到最終結果前,設定中間狀態。這些都是計算屬性無法做到的,所以在某些情況下還是需要使用watch來實現功能的

vue 計算屬性

在這裡我覺得講 computed 和methods放在一起討論 更 便於 理解。computed var vm new vue computed methods methods methods和computed從顯示效果是一樣的,但是主要的區別是 1.computer 是存在快取的,在data沒有改...

Vue 計算屬性

計算屬性在處理一些複雜邏輯時是很有用的。模板是為了描述檢視的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 vue.js 將繫結表示式限制為乙個表示式。如果需要多於乙個表示式的邏輯,應當使用計算屬性 computed。例項1 反轉字串 例項1中模板複雜,不好理解,現在我們採用計算屬...

Vue計算屬性

計算屬性 在模板中繫結表示式是非常便利的,但是它們實際上只用於簡單的操作。如果需要多於乙個表示式的邏輯,應當使用計算屬性。1.基礎例子 a b js var vm new vue computed 結果 a 1,b 2 這裡我們宣告了乙個計算屬性b。我們提供的函式將用作屬性vm.b的getter。c...