Vue2學習筆記:vue計算屬性

一、計算屬性

什么時候會用到計算屬性?

當綁定的數據邏輯較為復雜時!

例如:

傳入的javascript表達式較為復雜

①基礎例子

html
js
console

Vue 知道vm.reversedMessage依賴于vm.message,因此當vm.message發生改變時,依賴于vm.reversedMessage的綁定也會更新。

②計算緩存 vs Methods(計算屬性是基于它的依賴緩存)

為什么會這樣呢?因為computed下定義的方法有計算緩存,而methods下的方法沒有。

我們為什么需要緩存?假設我們有一個重要的計算屬性A,這個計算屬性需要一個巨大的數組遍歷和做大量的計算。然后我們可能有其他的計算屬性依賴于A。如果沒有緩存,我們將不可避免的多次執行A的 getter !如果你不希望有緩存,請用 method 替代。

③計算屬性 vs Watched Property(觀察vue實例上的數據變動)

顯然computed更佳

④計算setter

現在在運行vm.fullName = 'John Doe'時, setter 會被調用,vm.firstName和vm.lastName也會被對應更新。

二、觀察Watchers(watch學到的不多,倒是發現一個有趣的api、限制操作頻率的lodash以及axios)

在這個示例中,使用watch選項允許我們執行異步操作(訪問一個 API),限制我們執行該操作的頻率,并在我們得到最終結果前,設置中間狀態。這是計算屬性無法做到的。

學好Vue!

成為優秀的前端工程師!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容