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

Pinia getters 的缓存秘密：一场关于惰性与性能的探险

各位观众老爷们，大家好！我是你们的老朋友，今天咱们不聊八卦，不谈人生，就来扒一扒 Pinia 源码里 getters 的那点儿“小秘密”——缓存机制。

啥是缓存？说白了，就是把一些计算结果先存起来，下次再用的时候，直接拿来用，省得再算一遍。这就像你去饭馆吃饭，老板把几道招牌菜提前做好，你来了直接上，效率蹭蹭往上涨。

那 Pinia 的 getters 又是怎么玩转缓存的呢？答案就藏在 computed 的惰性求值里。别怕，听起来高大上，其实原理很简单，咱们慢慢来。

getters 的本质：computed 的巧妙伪装

首先，我们要明白，Pinia 的 getters 并不是什么魔法黑科技，它其实就是 Vue 的 computed 属性的一个“马甲”。源码里是这么实现的：

import { computed } from 'vue'

export function defineStore(id, options) {
  const store = {}

  if (options.getters) {
    for (const getterName in options.getters) {
      store[getterName] = computed(() => {
        // 在这里调用 getter 函数，并传入 state 作为参数
        return options.getters[getterName].call(store, store.state)
      })
    }
  }

  return store
}

看到了吗？Pinia 遍历 options.getters 里的每一个 getter 函数，然后用 computed 包裹起来。这意味着，每一个 getter 都变成了一个计算属性。

这有什么好处呢？好处大了！ computed 可是个好东西，它自带缓存功能，而且还是惰性求值的。

惰性求值：不着急，等需要再算

啥是惰性求值？简单来说，就是 “不到万不得已，绝不出手”。 computed 属性只有在第一次被访问的时候，才会真正执行计算。

举个例子：

<template>
  <p>Count: {{ count }}</p>
  <p>Double Count: {{ doubleCount }}</p>
</template>

<script setup>
import { useStore } from './store'
import { storeToRefs } from 'pinia'

const store = useStore()
const { count, doubleCount } = storeToRefs(store) // 使用 storeToRefs 创建响应式引用
</script>

// store.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useStore = defineStore('main', {
  state: () => ({
    count: ref(0)
  }),
  getters: {
    doubleCount: (state) => {
      console.log("Calculating doubleCount...");
      return state.count * 2
    }
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

在这个例子里，doubleCount 是一个 getter，它依赖于 count 这个 state。当我们第一次访问 doubleCount 的时候，才会执行 getter 函数，计算 count * 2 的值。然后，computed 会把这个结果缓存起来。

如果 count 的值没有改变，下次再访问 doubleCount 的时候，computed 就不会重新计算，而是直接返回缓存里的值。只有当 count 的值发生改变时，computed 才会重新执行 getter 函数，更新缓存。

你可以试试点击页面上的一个按钮，来触发 increment action，改变 count 的值。你会发现，只有在 count 改变的时候，才会打印 "Calculating doubleCount…"。

缓存机制：用空间换时间

computed 的缓存机制，本质上是一种“用空间换时间”的策略。它把计算结果保存在内存里，下次直接读取，避免了重复计算，提高了性能。

但是，缓存也是有代价的。缓存需要占用内存空间。如果缓存的数据量太大，或者缓存的生命周期太长，可能会导致内存泄漏。

所以，在使用 getters 的时候，我们要权衡利弊，避免过度使用缓存。一般来说，对于计算量大、依赖复杂、且不经常变化的数据，可以使用 getters 进行缓存。对于计算量小、变化频繁的数据，则可以考虑直接在模板里计算。

getters 的依赖追踪：谁动了我的奶酪？

computed 还有一个非常重要的特性：依赖追踪。它可以自动追踪 getter 函数里用到的所有 state。

当 getter 函数里用到的 state 发生改变时，computed 会自动失效，下次访问的时候，就会重新计算。

还是拿上面的例子来说，doubleCount 依赖于 count。当 count 的值发生改变时，doubleCount 会自动失效。下次访问 doubleCount 的时候，computed 就会重新执行 getter 函数，计算新的 count * 2 的值。

这种依赖追踪机制，保证了 getters 的值始终是最新的。

storeToRefs：让 getters 变成响应式引用

在 Vue 组件中使用 Pinia store 的 getters 时，我们需要使用 storeToRefs 这个函数。

import { storeToRefs } from 'pinia'

const store = useStore()
const { count, doubleCount } = storeToRefs(store)

storeToRefs 的作用是将 store 里的 state 和 getters 转换成响应式引用。这意味着，当 state 或 getters 的值发生改变时，Vue 组件会自动更新。

如果不使用 storeToRefs，直接访问 store.count 和 store.doubleCount，虽然也能获取到值，但是这些值不是响应式的。当 state 的值发生改变时，Vue 组件不会自动更新。

深入源码：computed 到底做了什么？

说了这么多，我们还是来扒一扒 computed 的源码，看看它到底是怎么实现缓存和依赖追踪的。

由于 computed 的实现比较复杂，这里我们只看关键部分：

// 简化的 computed 实现

import { track, trigger } from './reactive' // 响应式系统相关的函数

class ComputedRefImpl {
  private _value: any
  private _dirty = true // 初始状态为脏，需要重新计算
  private _effect: ReactiveEffect // 用于追踪依赖的 effect

  constructor(getter, public readonly scheduler?: Function) {
    this._effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true
        trigger(this, "set") // 触发更新
      }
    })
  }

  get value() {
    if (this._dirty) {
      this._value = this._effect.run() // 执行 getter 函数，并收集依赖
      this._dirty = false
    }
    track(this, "get") // 追踪依赖
    return this._value
  }
}

// ReactiveEffect 用于追踪依赖
class ReactiveEffect {
  constructor(public fn, public scheduler?) {}

  run() {
    activeEffect = this // 设置当前 activeEffect
    cleanupEffect(this) // 清除之前的依赖
    const result = this.fn() // 执行 getter 函数
    activeEffect = undefined // 重置 activeEffect
    return result
  }
}

// track 函数用于收集依赖
function track(target, key) {
  if (activeEffect) {
    // 将 activeEffect 添加到 target[key] 的依赖集合里
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      depsMap = new Map()
      targetMap.set(target, depsMap)
    }

    let dep = depsMap.get(key)
    if (!dep) {
      dep = new Set()
      depsMap.set(key, dep)
    }

    dep.add(activeEffect)
  }
}

// trigger 函数用于触发更新
function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }

  const dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => {
      if (effect.scheduler) {
        effect.scheduler() // 如果有 scheduler，则执行 scheduler
      } else {
        effect.run() // 否则，直接执行 effect
      }
    })
  }
}

这段代码做了以下几件事：

1. ComputedRefImpl 类：这是 computed 的核心实现。它包含一个 _value 属性用于保存缓存的值，一个 _dirty 属性用于标记是否需要重新计算，以及一个 _effect 属性用于追踪依赖。

2. 惰性求值：ComputedRefImpl 的 value getter 会检查 _dirty 属性。如果 _dirty 为 true，则执行 _effect.run() 计算新的值，并把 _dirty 设置为 false。否则，直接返回缓存的值。

3. 依赖追踪：_effect.run() 在执行 getter 函数之前，会设置 activeEffect 为当前的 _effect 实例。然后在 getter 函数执行过程中，如果访问了响应式数据，track 函数就会把当前的 _effect 添加到该响应式数据的依赖集合里。

4. 触发更新：当响应式数据的值发生改变时，trigger 函数会找到该响应式数据的所有依赖，然后执行这些依赖的 _effect 的 scheduler 或 run 方法，从而触发 computed 的更新。

简单来说，computed 就是通过 ReactiveEffect 来追踪 getter 函数的依赖，并在依赖发生改变时，自动失效并重新计算。

getters 的适用场景

那么，在实际开发中，哪些场景适合使用 getters 呢？

场景	是否适合使用 getters	理由
需要对 state 进行转换和处理	是	getters 可以将 state 转换成更方便使用的格式，避免在组件中重复编写转换逻辑。
需要根据多个 state 计算出一个新的值	是	getters 可以将多个 state 组合起来，计算出一个新的值。
计算量大，且不经常变化的数据	是	getters 可以缓存计算结果，避免重复计算，提高性能。
需要在多个组件中共享同一个计算结果	是	getters 可以将计算逻辑封装在 store 里，方便在多个组件中共享。
计算量小，且变化频繁的数据	否	这种情况下，getters 的缓存机制反而会降低性能，建议直接在组件中计算。
不需要对 state 进行任何处理，直接返回 state	否	这种情况下，直接在组件中使用 state 即可，不需要使用 getters。

小结

好了，各位观众老爷们，今天我们一起深入了解了 Pinia 源码里 getters 的缓存机制。

• getters 本质上是 Vue 的 computed 属性的一个“马甲”。
• computed 具有惰性求值和依赖追踪的特性，可以自动缓存计算结果，并在依赖发生改变时，自动失效并重新计算。
• storeToRefs 可以将 store 里的 state 和 getters 转换成响应式引用。
• 在使用 getters 的时候，我们要权衡利弊，避免过度使用缓存。

希望通过今天的讲解，大家能够对 Pinia 的 getters 有更深入的了解，并在实际开发中灵活运用。

下次有机会，我们再聊聊 Pinia 的其他“小秘密”。感谢大家的观看！