在vue中我们经常会用到计算属性(computed)，它是vue提供的一种便捷的计算属性方法。使用computed可以轻松地根据数据的变化来动态计算出一个新的值，而无需在模板中写很多的逻辑判断。
但是不同于方法(methods)或者watcher，computed具有缓存机制。也就是说，如果一个计算属性所依赖的数据没有发生变化，那么就不会重新计算这个值，从而提高了计算效率。
现在我们来探讨一下computed为什么有缓存机制。
首先，我们来看一个例子：
<template>
<div>{{ message }}</div>
<button @click="updateData">Update data</button>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe',
}
},
computed: {
message() {
console.log('computed');
return `${this.firstName} ${this.lastName}`;
},
},
methods: {
updateData() {
this.firstName = 'Tom';
},
},
};
</script>当我们初次渲染页面时，computed会被计算出一个新的值，而console.log('computed')也只会在这个时候执行一次。接着，我们点击button，firstName被修改为'Tom'，此时我们会发现，页面上的message并没有被重新计算，console.log('computed')也没有执行。
立即学习“前端免费学习笔记（深入）”；
简单来说，这是因为computed使用了缓存机制。当computed依赖的数据没有发生变化时，Vue会直接从缓存中取出计算结果，而不会再次运算。因此，我们在这里触发更新firstName的变化，虽然数据已经被修改，但由于computed的缓存机制，message没有被重新计算。
借助这种缓存机制，我们不仅可以提高计算效率，而且可以避免不必要的计算，从而减少了对系统资源的占用，提升了系统的性能。
但是，在一些特定的场景下，computed的缓存机制可能会引发一些问题，比如在依赖数据为空的时候仍然返回缓存值等情况。这就需要我们在使用computed时，注意观察数据变化情况，以确保计算结果的正确性。
总之，computed的缓存机制在个人开发和项目中，都是非常有用的特性之一。它可以让我们更加方便地进行数据计算，同时又能提高系统的性能，值得我们深入了解和使用。
