Best Practices für die Verwendung von Gettern und/oder berechneten Eigenschaften in Vue.js

Question

Ich liebe vue.js und ich liebe auf jeden Fall berechnete Eigenschaften und VueX Getter. Aber ich bin an einem Punkt angelangt, an dem ich nicht sicher bin, ob die Art und Weise, wie ich sie verwende, einige Leistungsnachteile mit sich bringt.

Dies ist ein häufiges Muster in meinem Code (gilt auch für lokale Komponentendaten und berechnete Eigenschaften):

Beginnen Sie mit diesem einfachen Zustand (Quelle der Wahrheit):

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

In meinem Getter mache ich das normalerweise so:

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....
  }
  ...
}

Meine Frage lautet also

1. Wird dies als schlechte Vorgehensweise angesehen, weil ich einen Getter verwende, der von anderen Gettern abhängt? Werden diese als zirkuläre Abhängigkeiten betrachtet?

2. Soll ich meine Getter immer direkt von der Quelle der Wahrheit ableiten? Ändern Sie das Obige beispielsweise in...

getTotalBonds(state) {
    return state.bonds.eth.length + state.bonds.celo.length
}

3. Gibt es eine Möglichkeit, meine Getter oder berechneten Eigenschaften mithilfe der Browserkonsole zu debuggen, um sicherzustellen, dass ich keine Leistungsprobleme oder seltsamen Iterationsschleifen usw. habe?

Vielen Dank, wenn Sie sich die Zeit nehmen, zu antworten!

Answer 1

这不会是一个循环依赖。只有当getter A 依赖于getter B，而getter B 又依赖于getter A 时，才会出现循环依赖，这将导致无限递归。

getter是没问题的，但据我所知，Vue会在每个tick上调用它们（关于什么是tick的更多信息，请点击这里），这在大多数情况下是浪费的。因此，对于很少变化的值，建议使用computed，因为computed只会被调用一次，Vue会缓存执行结果。