Amalan terbaik untuk menggunakan getter dan/atau sifat yang dikira dalam Vue.js

Question

Saya suka vue.js dan pastinya saya sukakan hartanah yang dikira dan VueX getter. Tetapi saya telah mencapai tahap di mana saya tidak pasti sama ada cara saya menggunakannya akan mempunyai beberapa kelemahan prestasi.

Ini ialah corak biasa dalam kod saya (juga benar untuk data komponen tempatan dan sifat yang dikira):

Mulakan dengan keadaan mudah ini (sumber kebenaran):

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

Dalam pengambil saya, saya biasanya melakukannya seperti ini:

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

Jadi, soalan saya ialah

1. Adakah ini dianggap amalan buruk kerana saya menggunakan getter yang bergantung kepada getter lain? Adakah ini dianggap kebergantungan bulat?

2. Adakah saya perlu sentiasa memperoleh getter saya terus daripada sumber kebenaran? Sebagai contoh, tukar perkara di atas kepada...

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

3. Adakah terdapat cara untuk menyahpepijat getter atau sifat pengiraan saya menggunakan konsol penyemak imbas untuk memastikan saya tidak menghadapi masalah prestasi atau gelung lelaran pelik dan lain-lain?

Terima kasih banyak jika anda meluangkan masa untuk menjawab!

Answer 1

Ini tidak akan menjadi pergantungan bulat. Hanya apabila pengambil adalah A 依赖于getter B，而getter B 又依赖于getter A, kebergantungan bulat akan berlaku, yang akan membawa kepada rekursi yang tidak terhingga.

getter ok, tetapi setakat yang saya tahu Vue memanggil mereka pada setiap tanda (untuk mendapatkan maklumat lanjut tentang apa itu tanda, klik di sini), yang membazir dalam kebanyakan kes . Oleh itu, untuk nilai yang jarang berubah, disyorkan untuk menggunakan computed，因为computed yang hanya akan dipanggil sekali dan Vue akan cache hasil pelaksanaan.