Meilleures pratiques pour l'utilisation des getters et/ou des propriétés calculées dans Vue.js

Question

J'adore vue.js et j'aime vraiment les propriétés calculées et les VueX getters. Mais j'ai atteint un point où je ne suis pas sûr que la façon dont je les utilise entraînera des inconvénients en termes de performances.

Il s'agit d'un modèle courant dans mon code (également vrai pour les données de composants locaux et les propriétés calculées) :

Commencez par cet état simple (source de vérité) :

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

Dans mon getter, je le fais habituellement comme ceci :

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

Donc, ma question sera

1. Est-ce considéré comme une mauvaise pratique car j'utilise un getter qui dépend d'autres getters ? Sont-elles considérées comme des dépendances circulaires ?

2. Dois-je toujours dériver mes getters directement de la source de vérité ? Par exemple, remplacez ce qui précède par...

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

3. Existe-t-il un moyen de déboguer mes getters ou mes propriétés calculées à l'aide de la console du navigateur pour m'assurer que je n'ai pas de problèmes de performances ou de boucles d'itération étranges, etc. ?

Merci beaucoup si vous prenez le temps de répondre !

Answer 1

Ce ne sera pas une dépendance circulaire. Ce n'est que lorsque le getter est A 依赖于getter B，而getter B 又依赖于getter A qu'une dépendance circulaire se produira, ce qui conduira à une récursivité infinie.

Les

getters sont ok, mais pour autant que je sache, Vue les appelle à chaque tick (pour plus d'informations sur ce qu'est un tick, cliquez ici), ce qui est un gaspillage dans la plupart des cas. Par conséquent, pour les valeurs qui changent rarement, il est recommandé d'utiliser computed，因为computed qui ne sera appelé qu'une seule fois et Vue mettra en cache les résultats de l'exécution.