Vue.js でゲッターや計算されたプロパティを使用するためのベスト プラクティス

Question

私は vue.js が大好きで、計算プロパティと VueX ゲッターも大好きです。しかし、私の使用方法がパフォーマンスに何らかの欠点をもたらすかどうかがわからない段階に達しました。

これは私のコードの一般的なパターンです (ローカル コンポーネント データと計算されたプロパティにも当てはまります):

この単純な状態 (真実の情報源) から始めます:

リーリー

私のゲッターでは、通常次の方法で実行します:

リーリー

それでは、私の質問は

となります。

1. 他のゲッターに依存するゲッターを使用しているため、これは悪い習慣とみなされますか?これらは循環依存関係とみなされますか?

2. ゲッターは常に真実のソースから直接導出する必要がありますか?たとえば、上記を次のように変更します...

リーリー

3. ブラウザ コンソールを使用してゲッターや計算されたプロパティをデバッグして、パフォーマンスの問題や奇妙な反復ループなどが発生していないことを確認する方法はありますか?

お時間を割いてご回答いただき、誠にありがとうございます。

Answer 1

これは循環依存関係にはなりません。循環依存関係は、ゲッター A がゲッター B に依存し、さらにゲッター A に依存する場合にのみ発生します。これにより、無限再帰が発生します。 ゲッターは問題ありませんが、私の知る限り、Vue はティックごとにそれらを呼び出します (

tick

の詳細については、ここ をクリックしてください)。これはほとんどの場合無駄です。ケース。したがって、めったに変更されない値の場合は、computed を使用することをお勧めします。computed は 1 回だけ呼び出され、Vue は実行結果をキャッシュするためです。