vue computed为什么有缓存-前端问答-PHP中文网

vue computed为什么有缓存

WBOY

发布： 2023-05-08 09:30:10

原创

1768人浏览过

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

以上就是vue computed为什么有缓存的详细内容，更多请关注php中文网其它相关文章！