Vue 的计算属性：真的会缓存吗？

前端

2023-12-19 17:47:28

Vue 的计算属性：解构缓存的神秘面纱

导言

Vue 中的计算属性一直以来都是开发者的热议话题，其中一个关键问题便是其缓存机制。人们常常听到传言说计算属性会缓存，但具体如何缓存，缓存什么，什么时候缓存失效，却鲜有人能说清楚。

本文以 Vue 2.6.11 版本为基准，深入原理，带你揭开 Vue 中计算属性缓存的神秘面纱。

深入缓存原理

Vue 中的计算属性之所以能缓存，是因为其内部采用了一种称为“惰性求值”的机制。这意味着计算属性只有在首次被访问时才会执行，计算出的结果将被存储在内部的缓存中。当再次访问该计算属性时，Vue 会直接从缓存中读取结果，而无需重新计算。

这种缓存机制有两个主要好处：

性能优化：避免了重复计算，提高了程序性能。
响应性：当计算属性的依赖项发生变化时，缓存将被自动失效，并重新计算该属性的值，从而确保数据的实时更新。

缓存的内容

Vue 中计算属性缓存的是属性本身计算出的结果，而非依赖项。这也就意味着，当计算属性的依赖项发生变化时，缓存会被失效，计算属性将重新计算并生成新的结果。

缓存失效的时机

计算属性的缓存会在以下情况下失效：

当计算属性的依赖项发生变化时。
当 Vue 实例被重新渲染时。
当计算属性被显式标记为无效时（例如使用 this.$forceUpdate()）。

缓存失效的实例

以下是一个简单的 Vue 组件示例，展示了缓存失效的原理：

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">更改消息</button>
</template>

<script>
export default {
  data() {
    return {
      message: '原始消息',
    }
  },
  computed: {
    uppercaseMessage() {
      return this.message.toUpperCase();
    }
  },
  methods: {
    changeMessage() {
      this.message = '更新的消息';
    }
  }
}
</script>