在vue中我们经常会用到计算属性(computed)，它是vue提供的一种便捷的计算属性方法。使用computed可以轻松地根据数据的变化来动态计算出一个新的值，而无需在模板中写很多的逻辑判断。

但是不同于方法(methods)或者watcher，computed具有缓存机制。也就是说，如果一个计算属性所依赖的数据没有发生变化，那么就不会重新计算这个值，从而提高了计算效率。

现在我们来探讨一下computed为什么有缓存机制。

首先，我们来看一个例子：

<template><p>{{ message }}</p>  <button>ｕｐｄａｔｅ data</button></template><ｓｃｒｉｐｔ>export default {  data() {    return {      firstName: 'John',      lastName: 'Doe',    }  },  computed: {    message() {      console.log('computed');      return `${this.firstName} ${this.lastName}`;    },  },  methods: {    updateData() {      this.firstName = 'Tom';    },  },};</ｓｃｒｉｐｔ>

当我们初次渲染页面时，computed会被计算出一个新的值，而console.log('computed')也只会在这个时候执行一次。接着，我们点击button，firstName被修改为'Tom'，此时我们会发现，页面上的message并没有被重新计算，console.log('computed')也没有执行。

立即学习“前端免费学习笔记（深入）”；

简单来说，这是因为computed使用了缓存机制。当computed依赖的数据没有发生变化时，Vue会直接从缓存中取出计算结果，而不会再次运算。因此，我们在这里触发更新firstName的变化，虽然数据已经被修改，但由于computed的缓存机制，message没有被重新计算。

借助这种缓存机制，我们不仅可以提高计算效率，而且可以避免不必要的计算，从而减少了对系统资源的占用，提升了系统的性能。

但是，在一些特定的场景下，computed的缓存机制可能会引发一些问题，比如在依赖数据为空的时候仍然返回缓存值等情况。这就需要我们在使用computed时，注意观察数据变化情况，以确保计算结果的正确性。

总之，computed的缓存机制在个人开发和项目中，都是非常有用的特性之一。它可以让我们更加方便地进行数据计算，同时又能提高系统的性能，值得我们深入了解和使用。