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