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

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

推薦閱讀
- 網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- JSP網(wǎng)站開發(fā)詳解
- 中文版Flash CC完全自學(xué)教程
- jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程(慕課版·第2版)
- Web前端開發(fā)精品課 HTML與CSS進階教程
- HTML5+CSS3網(wǎng)頁制作基礎(chǔ)培訓(xùn)教程
- HTML+CSS+JavaScript網(wǎng)頁制作案例教程(第2版)
- 動態(tài)網(wǎng)頁設(shè)計(第2版)
- JSP動態(tài)網(wǎng)站開發(fā)案例指導(dǎo)
- 動態(tài)網(wǎng)頁設(shè)計與制作(HTML5+CSS3+JavaScript)(第3版)
- 秩序之美:網(wǎng)頁中的網(wǎng)格設(shè)計
- Highcharts網(wǎng)頁圖表制作實例詳解 (Web開發(fā)典藏大系)
- 寬帶接入技術(shù)
- Web綜合實戰(zhàn)教程
- Dreamweaver,F(xiàn)lash,F(xiàn)ireworks網(wǎng)頁設(shè)計百練成精(CS3版)