vue之computed的緩存特性
vue computed緩存特性
概述
computed的計(jì)算屬性有緩存機(jī)制，只有當(dāng)其依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)才會(huì)清空緩存重新計(jì)算結(jié)果
1.其緩存機(jī)制本質(zhì)是通過一個(gè)dirty屬性控制的，只有dirty為true時(shí)才會(huì)重新計(jì)算結(jié)果替換緩存。
2.dirty只有當(dāng)其響應(yīng)式數(shù)據(jù)發(fā)送變化時(shí)才會(huì)設(shè)置為true，重新計(jì)算后會(huì)再次被設(shè)置為false
測(cè)試
<template> <div> <button @click="changeValue">更新Value</button> <button @click="getComputedValue">打印computedValue</button> </div> </template>
<script>
export default {
data(){
return {
value: 1
}
},
computed: {
computedValue(){
return this.value + '--' + Math.random()
}
},
methods: {
changeValue(){
this.value++;
},
getComputedValue(){
console.log(this.computedValue);
}
}
}
</script>
結(jié)果
1.點(diǎn)擊第二個(gè)按鈕，多次獲取computedValue的值時(shí)，返回的值都是相同的，Math.random()不會(huì)重新獲取。
2.體現(xiàn)了computed的緩存特性。只有當(dāng)點(diǎn)擊了第一個(gè)按鈕，修改了computedValue依賴的響應(yīng)式數(shù)據(jù)后，才會(huì)更新computedValue的緩存
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue、uniapp實(shí)現(xiàn)組件動(dòng)態(tài)切換效果
在Vue中，通過使用動(dòng)態(tài)組件，我們可以實(shí)現(xiàn)組件的動(dòng)態(tài)切換，從而達(dá)到頁面的動(dòng)態(tài)展示效果，這篇文章主要介紹了vue、uniapp實(shí)現(xiàn)組件動(dòng)態(tài)切換,需要的朋友可以參考下2023-10-10
vue文件上傳讀取文件數(shù)據(jù)進(jìn)行格式校驗(yàn)方式
該文章描述了使用Element-UI的`el-upload`組件實(shí)現(xiàn)文件上傳前的內(nèi)容校驗(yàn),通過`beforeUpload`鉤子讀取并解析文件內(nèi)容,校驗(yàn)其格式和數(shù)據(jù)有效性,確保符合要求后才進(jìn)行上傳,詳細(xì)介紹了校驗(yàn)邏輯及上傳流程2026-05-05
vue基于element-china-area-data插件實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)
省市區(qū)聯(lián)動(dòng)在日常開發(fā)中用的非常多，本文就介紹一下vue基于element-china-area-data插件實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
Vue實(shí)現(xiàn)微信小程序中預(yù)覽文件的縮放功能
在微信小程序中,默認(rèn)情況下,文件預(yù)覽功能不支持文檔縮放,導(dǎo)致用戶在遇到小字體時(shí)難以清晰閱讀,為了解決這一問題并提升用戶體驗(yàn),實(shí)現(xiàn)文檔的縮放功能至關(guān)重要,所以本文2024-12-12
Vue項(xiàng)目啟動(dòng)白屏問題的幾種解決辦法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)白屏問題的幾種解決辦法,Vue項(xiàng)目打包后出現(xiàn)白屏的可能原因有很多,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue接通后端api以及部署到服務(wù)器操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue導(dǎo)出word純前端的實(shí)現(xiàn)方式
這篇文章主要介紹了vue導(dǎo)出word純前端的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在VUE項(xiàng)目中經(jīng)常會(huì)用到mapState和mapActions，mapState主要用于同步全局的變量或者對(duì)象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下2022-06-06
vue.js框架實(shí)現(xiàn)表單排序和分頁效果
這篇文章主要為大家詳細(xì)介紹了vue.js框架實(shí)現(xiàn)表單排序和分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載詳解
這篇文章主要給大家介紹了關(guān)于vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11