vue之computed的緩存特性
vue computed緩存特性
概述
computed的計(jì)算屬性有緩存機(jī)制，只有當(dāng)其依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)才會(huì)清空緩存重新計(jì)算結(jié)果
1.其緩存機(jī)制本質(zhì)是通過(guò)一個(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不能檢測(cè)到數(shù)據(jù)變化的幾種情況說(shuō)明
這篇文章主要介紹了Vue不能檢測(cè)到數(shù)據(jù)變化的幾種情況說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在vite項(xiàng)目中使用@進(jìn)行文件的引入方式
這篇文章主要介紹了在vite項(xiàng)目中使用@進(jìn)行文件的引入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue2中的組件通信方式，文中通過(guò)示例進(jìn)行了詳細(xì)的介紹，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的小伙伴可以了解一下2022-07-07
前端不用跑項(xiàng)目vscode組件效果所見(jiàn)即所得
這篇文章主要為大家介紹了一款不用跑項(xiàng)目的vscode組件所見(jiàn)即所得效果的使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue登錄注冊(cè)的相關(guān)實(shí)例內(nèi)容以及寫(xiě)法分析，有需要朋友們可以學(xué)習(xí)下。2019-09-09
vue2+elementui上傳照片方式(el-upload超簡(jiǎn)單)
這篇文章主要介紹了vue2+elementui上傳照片方式(el-upload超簡(jiǎn)單),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解
watch是一個(gè)偵聽(tīng)器，默認(rèn)是懶偵聽(tīng)的，即僅在偵聽(tīng)源發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù)，watchEffect是會(huì)自動(dòng)收集函數(shù)里面變量的響應(yīng)式依賴，本文主要來(lái)講講二者的區(qū)別，感興趣的可以了解一下2023-07-07
基于Vue和Element-Ui搭建項(xiàng)目的方法
這篇文章主要介紹了基于Vue和Element-Ui搭建項(xiàng)目的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞
這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞的相關(guān)資料，文中通過(guò)示例代碼和圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
cross-env 是一個(gè)非常實(shí)用的 Node.js 包,它允許你跨平臺(tái)（Windows, macOS, Linux）使用環(huán)境變量,這對(duì)于在不同的操作系統(tǒng)上運(yùn)行腳本時(shí)保持一致性非常有用,這篇文章主要介紹了vue cross-env使用和配置方法,需要的朋友可以參考下2024-08-08