如何理解vue2.x官网计算属性是基于它们的响应式依赖进行缓存的
以以下代码为示例,会发现除了计算属性不变,methods会随startTime的变更时重绘画面会重新执行,由于计算属性是响应式依赖进行缓存的,而comData没有依赖变动的属性,所以就算出现重绘,comData的值也不会变.
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>
- 接上,在上述环境中如何让
comData也会随着startTime变化而变化,再次品味一下计算属性是响应式依赖进行缓存的,于是只需在comData里加入this.startTime即可(甚至都不需要做赋值|运算等操作,只要引入后计算属性就会把它作为响应式依赖,当this.startTime发生变化时就会返回新的值)
comData() {
// eslint-disable-next-line no-unused-expressions
this.startTime;
return new Date().getSeconds() + "from computed";
},
把最初代码块中的comData改为上述代码后,会发现上述都随startTime的变化而变化了,区别是:
- 方法
getData是由于template中有startTime,而startTime发生了变化引起重绘导致又重新执行了getData方法;此时若注释掉template中的<div>{{ startTime }}</div>会发现依然会变化,这是因为一旦在comData引入了依赖,而依赖发生变化都会引起重绘,而只要重绘都会引起重新执行getData方法 - 计算属性变化是因为依赖的
startTime发生了变化所以会取新值
