VUE入門到實戰 Vue計算屬性,方法和偵聽器

2021-08-28 20:32:41 字數 1432 閱讀 3534

1、為了防止資料冗餘,我們使用例項屬性computed來解決,computed是快取機制,這個快取機制就是作為引數用來計算的變數沒有改變,那麼就不會重複計算。

2、什麼意思?比如說下面的fullname由firstname和lastname計算,頁面開始的時候會計算一次fullname的值並快取下來,在頁面重新整理或者過程中firstname和lastname沒有發生變化,那麼fullname一直用的是快取的值。但是一但firstname和lastname發生了改變,那麼fullname就會重新計算一次,並快取下來。

1、由於我們的上面的例子中fullname是計算屬性中的,所以是依賴firstname和lastname,我們不能直接給fullname賦值來改變他,必須通過改變firstname和lastname的值來改變它,所以出現了setter和getter。

2、計算屬性預設只有 getter ,不過在需要時你也可以提供乙個 setter 

1、上面我們通過計算屬性的方式來實現,實際上通過方法也能夠實現同樣的效果。但是注意的是,在插值表示式中使用methods中的方法要記得帶上括號。如下所示:

2、雖然使用方法能和計算屬性達到相同的效果,但是不如計算屬性效能好,因為使用了方法,即使firstname或者lastname沒有發生變化,如下列中你改變age這個和fullname完全不相關的變數,fullname也會重新計算一次,這種就很煩躁。

} }

1、除了我們上面使用的兩種方法,還有第三種放法可以實現這樣的效果,偵聽器,當資料發生變化,我們使用乙個函式來寫變化導致的操作。

2、watch這種方式和computed相比,也存在快取機制,但是缺點也很明顯,很複雜,而且需要偵聽所有會導致fullnname變化的引數。所以這三個方法我們還是推薦computed這種方法,簡潔,效能高。

}

3、雖然計算屬性在大多數情況下更合適,但有時也需要乙個自定義的偵聽器。這就是為什麼 vue 通過watch選項提供了乙個更通用的方法,來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時,這個方式是最有用的。下面這個是官方的例子,很有用:(這個例子就是在乙個輸入框中輸入內容,每次的輸入都會導致question的改變,由於使用了watch來監聽,每次的輸入都會去執行getanswer函式,而這個函式中就是先判斷有沒有「?」,沒有就自動return,認為你還沒有輸入完,當你輸入?後,就開始去訪問api,然後返回獲得的資料)

4、在這個示例中,使用watch選項允許我們執行非同步操作 (訪問乙個 api),限制我們執行該操作的頻率,並在我們得到最終結果前,設定中間狀態。這些都是計算屬性無法做到的。

Vue之計算屬性實戰

例1 差值模板中使用js表示式 data 模板內的表示式非常便利,但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。原始值 p 反轉訊息 p 所以,對於任何複雜邏輯,你都應當使用計算屬性 例2 使用計算屬性 computed 反轉訊息 p 例3 使用方法 method...

vue 計算屬性

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

Vue 計算屬性

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