さっそく説明に入りましょう。
まず、computed と watch をそれぞれ使用してケースを実装しましょう。
計算された実装(上部の H5 部分、下部の Vue 部分):
実装を監視します:
比較すると、computed の方が watch よりも便利で、コードが少なく、watch には重複したコードがほとんどあることがわかります。
公式文書の中で、当局者は計算された方が優れているとも述べていますが、当局者はまた、「そうではありませんか?」という疑問も提起しました。
次に、「姓が変わると、1 秒遅れてフルネームが変更される」という新しい要件を提案してみましょう。
ウォッチは setTimeout を追加します
次に、setTimeoutをcomputedに追加しましょう
結果：
失敗した fullName は直接消えました
失敗の原因を分析してみよう
setTimeoutにコールバック関数があって、コールバック関数に戻りますよね、fullNameにないとページに表示されませんよね？戻りましょう
これは、computed が戻り値を受け取らなかったことを示しているため、computed が値を取得するために戻る必要があることも示すことができます。
詳しく見てみましょう:
Watch は独自のコードを変更することで結果を変更しますが、computed は return を通じて結果を変更します。
データを維持するために計算プロパティで非同期操作を有効にすることはできないと言えますか?
結論：computedでできることはwatchでもできる
(両方とも実行できる場合は計算済みを選択します)
watch でできることは、computed ではできない場合があります (例: watch は非同期操作を実行できます)
次に、ここには隠された小さな詳細が含まれています。
アロー関数はメソッド、computed、watch では使用できません。
それはどういう意味ですか? ここでも例を使用して説明します (天気の例を監視するために時計を使用します)
通常の関数を使用する
印刷されるものも vm
アロー関数を使用する
印刷したものはWindowになりました
コーディングでは vm に含まれる値が必要になるため、続行する前にそれを取得する必要があります。そこで、アロー関数と通常の関数を比較のために使用します。(もちろん、ダイアログ ボックス 1 をポップアップ表示するなど、vm を使用する必要がない場合)、使用する関数は次のとおりです。
メソッドなどでアロー関数を使用すると、ウィンドウ(メソッド、計算済み、ウォッチ自体は vm によって管理されます)が見つかります。ウィンドウ内には this point がないため、外側が見えます。
それでは、なぜ時計のタイマーにアロー機能を使用するのか疑問に思うでしょう。
setTimeout は Vue の firstName 管理に属しますが、setTimeout に含まれるコールバック関数は Vue 管理に属さず、ブラウザー タイミング管理に属するためです。次に、アロー関数を書かない場合、これはウィンドウであり、アロー関数を書きます。上で述べたように、見つからない場合は、外に出て firstName を見つけることになりますが、firstName はarrow 関数、これは Vue によって管理される関数 (通常の関数) であり、この時点では vm を指します。
また疑問があるかもしれません。私たちの多くは混乱しています。要約は次のとおりです。
1. Vue によって管理される関数 (計算関数、メソッド、監視) は通常の関数として作成するのが最適であり、そのポイントは vm またはコンポーネントのインスタンス化オブジェクトになります。
2. Vue によって管理されない関数 (タイマー コールバック関数、ajax コールバック関数) は、アロー関数として記述するのが最適です。これは、vm またはコンポーネントのインスタンス化オブジェクトを指します。
何が間違っているかを指摘し、修正する方法を学びます。
私の学習の要約がお役に立ちましたら、集めて高評価をお願いします。