阐述 Pinia 源码中 `getters` 的缓存机制，以及它们如何依赖于 `computed` 的惰性求值。

Pinia Getters 的缓存机制：一场关于惰性求值的精彩演出

各位观众，晚上好！欢迎来到我的 Pinia 源码解析特别节目。今天我们要聊的是 Pinia 中一个非常重要，但又常常被忽视的特性：getters 的缓存机制。

别看 getters 好像只是简单的函数，但它们背后隐藏着一层巧妙的设计，尤其是与 computed 的惰性求值结合，简直就是一场精彩的性能优化演出。

准备好了吗？让我们一起揭开 getters 的神秘面纱！

什么是 Getters？

首先，我们来回顾一下什么是 getters。简单来说，getters 就是你在 Pinia store 中定义的计算属性。它们允许你根据 store 的 state 值派生出新的值，就像 Vue 中的 computed 属性一样。

举个例子：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    isEven: (state) => state.count % 2 === 0,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

在这个例子中，doubleCount 和 isEven 就是 getters。它们分别根据 count 的值计算出两倍的值和是否为偶数。

Getters 的本质：Computed 属性

关键来了！在 Pinia 的底层实现中，getters 实际上就是通过 Vue 的 computed 函数创建的计算属性。这意味着 getters 拥有 computed 的所有特性，其中最重要的就是 惰性求值 (Lazy Evaluation) 和 缓存 (Caching)。

惰性求值：不着急，等着用再说

惰性求值是指只有当 getter 的值被访问时，才会进行计算。如果你定义了一个 getter，但是从未使用它，那么它就不会被执行。这可以避免不必要的计算，提高性能。

用一个更通俗的比喻：惰性求值就像一个懒人，不到万不得已绝不动手。只有当有人需要他的帮助时，他才会开始行动。

缓存：算过一次，下次直接用

缓存是指 getter 的值在第一次计算后会被保存下来。如果 getter 依赖的 state 值没有发生改变，那么下次访问 getter 时，直接返回缓存的值，而不需要重新计算。这可以极大地提高性能，尤其是对于计算量大的 getter 来说。

缓存就像一个记忆力超群的人，算过一次的题，下次直接给出答案，不用再费脑筋。

Pinia 如何实现 Getters 的缓存机制？

现在，我们深入到 Pinia 的源码，看看它是如何利用 computed 来实现 getters 的缓存机制的。

以下是 Pinia 中创建 getters 的简化版代码：

import { computed, isRef } from 'vue'

function createGetters(store, options) {
  const computedGetters = {};

  for (const getterName in options.getters) {
    const rawGetter = options.getters[getterName];

    computedGetters[getterName] = computed(() => {
      // 允许 getter 访问 store 实例
      return rawGetter.call(store, store.state);
    });

    Object.defineProperty(store, getterName, {
      get: () => computedGetters[getterName].value,
      enumerable: true,
      configurable: true,
    });
  }
}

这段代码的关键在于 computed 函数的使用。Pinia 将每个 getter 函数都包裹在 computed 函数中，从而创建了一个计算属性。

代码解读：

1. computedGetters 对象： 用于存储所有通过 computed 创建的计算属性。
2. 遍历 options.getters： 循环遍历用户定义的 getters。
3. computed(() => ...)： 这是核心部分。computed 函数接收一个回调函数，这个回调函数就是 getter 的逻辑。computed 会自动追踪回调函数中使用的 state 变量，并在 state 变量发生改变时，重新执行回调函数。
4. rawGetter.call(store, store.state)： 调用用户定义的 getter 函数，并将 store 实例和 store.state 作为参数传递给它。这样，getter 函数就可以访问 store 的 state 和其他 actions。
5. Object.defineProperty(store, getterName, ...)： 将计算属性添加到 store 实例上。这样，你就可以像访问普通的属性一样访问 getter 了。关键是 get: () => computedGetters[getterName].value，这使得每次访问 store.getterName 时，都会触发 computed 属性的求值。

工作流程：

1. 首次访问： 当你第一次访问 store.doubleCount 时，computedGetters['doubleCount'].value 会被调用。由于这是第一次访问，computed 会执行 getter 函数，计算出 doubleCount 的值，并将结果缓存起来。
2. 后续访问： 如果 store.count 的值没有发生改变，那么当你再次访问 store.doubleCount 时，computed 会直接返回缓存的值，而不会再次执行 getter 函数。
3. 依赖改变： 如果 store.count 的值发生了改变，那么下次访问 store.doubleCount 时，computed 会检测到依赖发生了改变，重新执行 getter 函数，计算出新的值，并将结果更新到缓存中。

实例演示：缓存带来的性能提升

为了更直观地展示缓存带来的性能提升，我们来做一个简单的实验。

假设我们有一个计算量很大的 getter，它需要花费很长时间才能计算出结果。

import { defineStore } from 'pinia'

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

export const useExpensiveStore = defineStore('expensive', {
  state: () => ({
    data: Array.from({ length: 10000 }, (_, i) => i),
  }),
  getters: {
    expensiveCalculation: (state) => {
      console.time('expensiveCalculation');
      let sum = 0;
      for (let i = 0; i < state.data.length; i++) {
        sum += state.data[i];
      }
      // 模拟耗时操作
      sleep(100);
      console.timeEnd('expensiveCalculation');
      return sum;
    },
  },
  actions: {
    updateData() {
      this.data = Array.from({ length: 10000 }, (_, i) => i + Math.random());
    },
  },
})

在这个例子中，expensiveCalculation getter 会计算一个包含 10000 个元素的数组的总和，并且模拟了一个 100ms 的耗时操作。

现在，我们在组件中使用这个 getter：

<template>
  <p>Expensive Calculation: {{ expensiveStore.expensiveCalculation }}</p>
  <button @click="updateData">Update Data</button>
</template>

<script setup>
import { useExpensiveStore } from './stores/expensive';
import { onMounted } from 'vue';

const expensiveStore = useExpensiveStore();

onMounted(() => {
  // 首次访问 getter
  console.log('First access:', expensiveStore.expensiveCalculation);

  // 再次访问 getter
  console.log('Second access:', expensiveStore.expensiveCalculation);
});

const updateData = () => {
  expensiveStore.updateData();
};
</script>

运行这段代码，你会在控制台中看到类似这样的输出：

expensiveCalculation: 100.123ms
First access: 49995000

Second access: 49995000

可以看到，第一次访问 expensiveCalculation 时，花费了 100 多毫秒。但是，第二次访问时，立即返回了结果，没有花费任何时间。这就是缓存带来的性能提升。

如果你点击 "Update Data" 按钮，再次访问 expensiveCalculation，你会发现它又需要重新计算，因为 state.data 发生了改变。

Getters 的局限性

虽然 getters 的缓存机制非常有用，但它也有一些局限性：

1. 只读： getters 只能读取 state 的值，不能修改 state 的值。如果你需要在 getter 中修改 state 的值，你应该使用 actions。
2. 无副作用： getters 应该是一个纯函数，不应该有任何副作用。这意味着 getter 不应该修改任何外部变量，也不应该执行任何 I/O 操作。
3. 浅比较： computed 的依赖追踪是基于浅比较的。这意味着如果 state 中的一个对象或数组发生了深层变化，computed 可能无法检测到，从而导致缓存失效。

Getters 的使用技巧

为了更好地利用 getters 的缓存机制，这里有一些使用技巧：

1. 避免在 getter 中进行复杂的计算： 如果 getter 的计算量很大，应该考虑将其拆分成多个更小的 getter，或者使用 actions 将计算结果缓存到 state 中。
2. 使用 computed 的 flush 选项： computed 提供了 flush 选项，可以控制计算属性的更新时机。你可以使用 flush: 'sync' 选项，强制计算属性同步更新，但这可能会降低性能。
3. 使用 toRef 和 toRefs： 当你在组件中使用 storeToRefs 时，它会将 store 的 state 转换为响应式的 refs。但是，如果你的 state 包含对象或数组，并且你只想监听对象或数组的某个属性，你可以使用 toRef 或 toRefs 来创建更精确的依赖追踪。

Getters vs Actions：选择的艺术

你可能会有疑问：什么时候应该使用 getters，什么时候应该使用 actions？

一般来说，getters 用于计算派生值，而 actions 用于修改 state 的值。

特性	Getters	Actions
目的	计算派生值	修改 State
副作用	不应该有副作用	可以有副作用
修改 State	不允许	允许
异步	不推荐	允许
缓存	有缓存机制	没有缓存机制
使用场景	从 State 计算出新的数据，用于显示	执行异步操作，修改 State，触发其他 Actions

总结：

• 如果你的目标是根据 state 计算出一个新的值，并且这个值可能会被多次使用，那么你应该使用 getters。
• 如果你的目标是修改 state 的值，或者执行一些异步操作，那么你应该使用 actions。

结论

getters 是 Pinia 中一个非常强大的特性，它利用 computed 的惰性求值和缓存机制，可以极大地提高应用的性能。

通过理解 getters 的工作原理，你可以更好地利用它们，编写出更高效、更易维护的代码。

希望今天的讲座能帮助你更深入地理解 Pinia 的 getters 机制。 感谢大家的观看，我们下期再见！