Vue.js中使用Getter与计算属性的最佳实践及性能疑问

源状态（唯一数据源） #

export default () => ({
   bonds: {
    eth: [],
    celo: []
  }
})

常见Getter写法 #

export default {
  getBondsEth(state) {
    return state.bonds.eth
  },
  getBondsCelo(state) {
    return state.bonds.celo
  },
  getTotalBondsEth(_, getters) {
    return getters.getBondsEth.length
  },
  getTotalBondsCelo(_, getters) {
    return getters.getBondsCelo.length
  },
  getTotalBonds(_, getters) {
    return getters.getTotalBondsEth + getters.getTotalBondsCelo
  },
  getWhateverComputationEth(_, getters) {
    return getters.getBondsEth.reduce... or map or filter or find etc....
  }
  ...
}

疑问解答 #

1. 这种依赖其他Getter的写法是否属于不良实践？是否会形成循环依赖？
   这种写法不是不良实践，Vuex官方本身就支持Getter之间互相依赖，目的就是为了复用已有的计算逻辑。只要你避免写出循环引用的逻辑（比如Getter A依赖Getter B，同时Getter B又依赖Getter A），就不会出现循环依赖问题。你当前的写法是单向链式依赖，完全安全。

2. 是否应始终直接从唯一数据源派生Getter？
   没必要强制“始终”这么做，要根据实际场景判断：

• 如果逻辑简单且没有复用需求，直接读取state编写Getter（比如你给出的getTotalBonds简化写法）更直接，性能上和依赖其他Getter没有区别——因为Vuex的Getter是基于依赖缓存的，只有依赖的数据源变化时才会重新计算。
• 如果某个Getter的结果会被多个其他Getter或组件复用（比如getBondsEth），单独抽出来作为基础Getter能大幅减少重复代码，提升代码维护性。

3. 能否通过浏览器控制台调试Getter或计算属性，以排查性能问题或异常循环等情况？
   完全可以，常用调试方式如下：

• 调试Vuex Getter：
  • 打开Vue DevTools的Vuex面板，可直接查看所有Getter的当前值，还能追踪其依赖的state或其他Getter。
  • 在Getter函数内添加console.log()输出计算过程，或在浏览器控制台通过$store.getters['你的Getter名称']直接调用并查看结果。
  • 排查性能问题时，可在Getter内加入计时逻辑（比如console.time()/console.timeEnd()），或用浏览器Performance面板录制执行流程，定位耗时的Getter计算。
• 调试组件计算属性：
  • 在Vue DevTools的组件面板中，可查看对应组件的计算属性当前值及其依赖项。
  • 在计算属性的getter函数中添加日志，或在控制台通过组件实例（比如$vm.$options.computed.你的计算属性名.call($vm)）手动执行计算逻辑。
  • 怀疑存在循环依赖时，可通过DevTools的依赖追踪功能查看计算属性的依赖链，排查是否出现循环引用。

内容的提问来源于stack exchange，提问作者paro-paro