面试题：如何通过合理使用缓存优化Vue计算属性性能？

Question

在Vue项目中，计算属性可能会频繁计算一些复杂逻辑。假设存在一个计算属性依赖多个响应式数据，在不影响功能的前提下，怎样利用缓存机制优化其性能，请给出具体实现思路和代码示例。

Answer 1

实现思路

1. 使用Object.defineProperty创建缓存对象：通过Object.defineProperty为计算属性所在的Vue实例添加一个缓存对象，用于存储计算属性的结果。
2. 在计算属性中检查缓存：每次计算属性求值时，先检查缓存中是否已有对应结果。若有，则直接返回缓存值；若无，则进行计算，并将结果存入缓存。

代码示例

<template>
  <div>
    <p>计算属性结果: {{ complexComputed }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1: 1,
      data2: 2,
      data3: 3
    };
  },
  computed: {
    complexComputed() {
      const cacheKey = 'complexComputedCache';
      if (!this[cacheKey]) {
        // 复杂计算逻辑，这里以简单的加法为例
        this[cacheKey] = this.data1 + this.data2 + this.data3;
      }
      return this[cacheKey];
    }
  },
  created() {
    // 使用Object.defineProperty创建缓存对象
    Object.defineProperty(this, 'complexComputedCache', {
      enumerable: false,
      configurable: false
    });
  }
};
</script>

注意事项

1. 缓存失效：当依赖的响应式数据发生变化时，需要手动清除缓存，以便重新计算。例如，在watch函数中监测依赖数据变化并清除缓存。
2. 缓存清理：在Vue组件销毁时，应清理缓存以避免内存泄漏。可在beforeDestroy钩子函数中删除缓存属性。