計算、監視、更新区别

1、時計

理解：リスナー、特定のデータの変更をリッスンしていくつかの操作を実行します。データ内のデータが変更された場合、コストのかかる操作または非同期の操作を実行します

1.値型（単純型）データを監視する

// Vue インスタンスでは、
    新しいVue（{ 
        el： "#myApp" 、
        data：{ 
            num1： 1 、
            num2： 2 
        }、
        methods：{}、
        watch：{ 
            // ここの2つのプロパティ、最初の値は値の最新の変更、および第二変更前で
            （前後、）NUM1 {
                 この .num2後には= 1 
            } 
           即時負荷：trueに    // 。リスナーを行うためのページが最初にロード
         // ここでの意味は、そのリスニングNUM1です変更、num1のデータが変更されたときに、num2の値を操作する
        } 
    }）

2.参照（複合）タイプのデータを監視する

new Vue（{ 
        el： " 
                ＃myApp "、
        data：{ 
            obj：{ userName： "caicai" 
            } 
        }、
        watch：{ 
            obj：{ 
                handler（newValue、oldValue）{ 
                    //ハンドラー関数は、objが変更されたとき
                  console.log（newValue.userName、oldValue.userName）; 
                }、
                deep：trueのときに何をします                    か//深くリッスンするかどうか、true on、false off、default false 
                // deepを追加した後はオブジェクトobjと同等ハンドラーリスナーは最初のレイヤーの属性に追加されます。追加しない場合、参照アドレスのみが聞こえ、ハンドラー関数は実行されません
            } 
        } 
    }）;

2.
計算された理解：名前のとおり、属性の計算は、特定の属性（データ）を通じて特定の属性を計算することです。この重要なポイントは計算です。データを取得し、それを処理して計算結果を取得する必要があります。
元のVueテンプレートテンプレートでは、作成者の当初の目的は、いくつかの単純な操作を実行することでしたが、計算された

  <div id = "myApp"> 
        <input type = "text" v-model = "str"> 
   1.テンプレートに記述された最初の操作により、テンプレートが重くなり、保守が困難になります
        <p> {{str.split （ ""）.reverse（）。join（ ""）}} </ p>	 
   2. 2番目のメソッドは1つのメソッドで呼び出されます。複数の場所で使用すると、複数回実行され、実行速度が低下し、パフォーマンスが低下します。
        <p > {{fn（str）}} </ p> 
   3. 3番目の種類はフィルターを使用し、キャッシュを備えています
        。str が変更されない限り、それは再度操作されません<p> {{reverseStr}} </ p> 
    </ div> 
<script type = "text / javascript"> 
new Vue（{ 
    el： "＃myApp"、
    data：{ 
        str： "abcd" 
    }、
    methods：{ 
        fn（v）{ 
        	//さらに呼び出しがある場合、複数の
          リターンv.split（ ""）を実行します。Reverse（）。Join（ ""）// Explode--reverse--combination 
        } 
    }、
    計算：{ 
        reverseStr（）{
        	// strが変更されない場合、1回だけ実行し、キャッシュは
            this.str.split（ ""）を返します。reverse（）。join（ ""）
        } 
    } 
}）
</ script>

ここでは、2つの違いと
計算されたシナリオを簡単にまとめます。

1.自分で定義した変数を監視します。データで宣言する必要はありません。関数名は変数名
2です。処理後に複数の変数またはオブジェクトが値（結果）を返すのに適していますこれらの複数の変数のいずれかが変化すると、結果が変化します。
3.計算結果には、レスポンシブプロパティの変更に応じたキャッシュがあり、レスポンシブプロパティは変更されません。結果はキャッシュから直接読み取られます。
4.内部関数を呼び出すときに（）を追加しないでください。
5. returnを使用してreturnを返す必要があります
。6.計算されたデータ内のデータに対して代入演算を実行しないでください。これにより、無限ループが形成されます。

見る：

1.ウォッチ機能を呼び出す必要はありません。
2.監視に重点を置き、監視データが変化するとコールバック関数の操作が実行されます。
3.データが変更されたときに非同期または高コストの操作を実行する必要がある場合は、watchを使用する必要があります
。4。関数名は、監視するデータの名前です

使用シナリオ：

計算：
1.必要な結果がショッピングカートの決済金額（多くの場所での価格決済の対象）などの複数のデータの影響を受ける場合。
2.属性を操作し、いくつかの複雑なロジックを実行し、結果を複数の場所で使用します。
3.この結果は、内部関数の多くの場所で使用されます。
監視：
1. 1つのデータが複数のデータに影響を与えるのに適した、いくつかの入力ボックス値の特別な処理を監視します。
2.データが変更されたときに、いくつかの非同期操作、または比較的大きなオーバーヘッドの操作を実行します

3.
理解の更新：これは、Vueライフサイクルのフック関数です。データの更新により、ビューの更新がトリガーされます。ここでは、ビューの更新を実行した後の操作を示します。

トリガー条件：
1.データで定義されたデータが変更されると、更新されたメソッドがロードされます。

2.統一されたビジネスロジック処理を行う場合は、データの更新

3.ほとんどの場合、この期間中に状態を変更しないでください。これにより、更新の無限ループが発生する可能性があります。このフックは、サーバー側のレンダリング中には呼び出されません。

機能：
1.実行されると、データが変更されてインターフェースが更新されます
2.ルーティングデータ（URLのパラメーターなど）をリッスンできません
3.すべてのデータ変更が呼び出されます（消費パフォーマンス）
4.データが発生している限り変更、毎回同じコードがトリガーされます

1、時計

おすすめ