如何理解vue2.x官網(wǎng)計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的
以以下代碼為示例,會(huì)發(fā)現(xiàn)除了計(jì)算屬性不變,methods會(huì)隨startTime的變更時(shí)重繪畫面會(huì)重新執(zhí)行,由于計(jì)算屬性是響應(yīng)式依賴進(jìn)行緩存的,而comData沒有依賴變動(dòng)的屬性,所以就算出現(xiàn)重繪,comData的值也不會(huì)變.
image.png
<template>
<div id="app">
<div>{{ startTime }}</div>
<div>
{{ comData }}
</div>
<div>
{{ getData("method") }}
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
startTime: 0,
};
},
computed: {
comData() {
return new Date().getSeconds() + "from computed";
},
},
mounted() {
setInterval(() => {
this.startTime++;
}, 1000);
},
updated() {
window.console.log("更新了");
},
methods: {
getData() {
return new Date().getSeconds() + "from methods";
},
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- 接上,在上述環(huán)境中如何讓
comData也會(huì)隨著startTime變化而變化,再次品味一下計(jì)算屬性是響應(yīng)式依賴進(jìn)行緩存的,于是只需在comData里加入this.startTime即可(甚至都不需要做賦值|運(yùn)算等操作,只要引入后計(jì)算屬性就會(huì)把它作為響應(yīng)式依賴,當(dāng)this.startTime發(fā)生變化時(shí)就會(huì)返回新的值)
comData() {
// eslint-disable-next-line no-unused-expressions
this.startTime;
return new Date().getSeconds() + "from computed";
},
把最初代碼塊中的comData改為上述代碼后,會(huì)發(fā)現(xiàn)上述都隨startTime的變化而變化了,區(qū)別是:
- 方法
getData是由于template中有startTime,而startTime發(fā)生了變化引起重繪導(dǎo)致又重新執(zhí)行了getData方法;此時(shí)若注釋掉template中的<div>{{ startTime }}</div>會(huì)發(fā)現(xiàn)依然會(huì)變化,這是因?yàn)橐坏┰?code>comData引入了依賴,而依賴發(fā)生變化都會(huì)引起重繪,而只要重繪都會(huì)引起重新執(zhí)行getData方法 - 計(jì)算屬性變化是因?yàn)橐蕾嚨?code>startTime發(fā)生了變化所以會(huì)取新值
