- Vue.js從入門到項目實踐(超值版)
- 聚慕課教育研發中心編著
- 308字
- 2022-07-29 14:27:45
5.1.3 計算屬性緩存

在Vue中,可以將同一函數定義為一個方法,而不是一個計算屬性,兩種方式的最終結果確實是完全相同的,只是一個使用reverseTitle()取值、一個使用reverseTitle取值。不同的是,計算屬性是基于它們的依賴進行緩存的,計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著,只要title還沒有發生改變,多次訪問reverseTitle計算屬性會立即返回以前的計算結果,而不必再次執行函數。
代碼如下:
<div>{{reverseTitle()}}</div><br> //在組件中 methods: { reverseTitle: function(){ return this.title.split('').reverse().join('') } }
計算屬性緩存最大的特點就是屬性變化才執行getter函數,否則執行緩存默認的true指令打開緩存。
計算屬性緩存的作用:如果頻繁地使用計算屬性,而計算屬性方法中有大量的耗時操作(例如在getter中循環一個大的數組),會帶來一些性能問題。計算屬性緩存可用來解決該問題。

推薦閱讀
- 大型網站架構實戰
- Div+CSS網頁制作實戰教程
- UI動效大爆炸:After Effects移動UI動效制作學習手冊
- HTML+CSS+JavaScript網頁制作案例教程(第2版)
- 形·色:網頁設計法則及實例指導
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計實戰視頻教程
- 網頁設計與制作
- Highcharts網頁圖表制作實例詳解 (Web開發典藏大系)
- Dreamweaver CC網頁設計從入門到精通(微課精編版)
- Dreamweaver CS3網頁制作
- Dreamweaver CS6網頁設計入門、進階與提高
- 網頁美工設計基礎教程
- CSS3藝術:網頁設計案例實戰
- 網頁設計綜合實踐教程
- 精通HTML 5+CSS 3:100%網頁設計與布局密碼