ソースコードの実装でVUEのWathの

序文

このセクションを読んで、私たちは、VUEのデータ駆動原理を理解する必要があります。

コードのこの部分を見てください

新しいヴュー（{ 
    データ：{ 
        MSG： 'こんにちは' 、
        言う： 'こんにちは世界'は、
    }、
    腕時計：{ 
        MSG（newValに）{ 
            この .say = newValに+ '世界; 
        } 
    } 
}）

データは、2つのVUEのMSG属性が含まれており、言う、モニターを見て言うのMSGの値を更新します。

ソースコードの実装

1.新しいビュー

機能ヴュー（オプション）{
   場合（ "開発" == '生産' &&！ 
    （！この instanceofはヴュー）
  ）{ 
    （警告 'Vueのはコンストラクタですと`new`キーワードで呼び出さなければなりません' ）; 
  } 
  この._init（オプション）。
}

新しいVueのは、ハイテクinitStateを呼び出しプロトタイプ、_init法に_initメソッドを実行しますが、この方法は、すべての状態関連のコンテンツを初期化します

2. initWatch

我々は、実行を見て定義した場合initStatusが決定されますinitWatch

関数initWatch（VM、時計）{
   用（VARのキーで時計）{
     VARのハンドラは= [キー]腕時計。
    もし{（Array.isArray（ハンドラ））
       のための（VAR ; iはhandler.lengthを<I ++は、I = 0 ）{ 
        createWatcher（VM、キー、ハンドラ[I]）。
      } 
    } 他{ 
　　
      createWatcher（VM、キー、ハンドラ）。
    } 
  } 
}

このコードは、時計は、配列を配列し、ループを宣言し、直接、過去に渡されたcreateWatcher配列を呼び出さない場合は、createWatcherを呼び出す場合ことを意味します。これは、我々は複数のハンドラを宣言することができます見て、証明しています。

3. createWatcher

createWatcher主な仕事は、異なる値を渡し、入力値を処理することで互換性の異なる処理を行います

関数createWatcher（
  VM、
  expOrFn、
  ハンドラ、
  オプション
）{ 
 // ハンドラがオブジェクトである場合、次のハンドラハンドラを取得する関数がとして実行される時計属性
  IF （isPlainObject（ハンドラ））{ 
    オプション = ハンドラ。
    ハンドラ = handler.handler。
  } 
// ハンドラは、文字列、VUEの試作品を得る方法であれば
  IF（typeof演算ハンドラ=== '列' ）{ 
    ハンドラ = VM [ハンドラ]; 
  } 
// $ウォッチVUEプロトタイプに呼び出し
  リターンVM $時計。 （expOrFn、ハンドラ、オプション）
}

私たちが見ることができる以上により、時計の定義は、次のような多くの種類、があります。

新しい新しいヴュー（{ 
    ウォッチ：{ 
       // 文字列 
        test1の'handleTest' 、
         // オブジェクト
        TEST2：{ 
            ハンドラ（newValに）{ 
                // ... 
            } 
        } 
    }、
    メソッド：{ 
        handleTest（newValに）{ 
            // .. 。
        } 
    } 
}）

4. VM。$腕時計

Vue.prototype $ウォッチ=。機能（
    expOrFn、
    CB、
    オプション
）{ 
    VARのvm = この;
    もし（isPlainObject（CB））{
         戻りcreateWatcher（VM、expOrFn、CB、オプション）
    } 
    オプション =オプション|| {}; 
    options.user = 真;
    // 新しい一个ウォッチャー实例
    するvarウォッチャー= 新しいウォッチャー（VM、expOrFn、CB、オプション）;
    もし（options.immediate）{ 
        cb.call（VM、watcher.value）。
    } 
    戻り 関数unwatchFn（）{ 
        watcher.teardown（）。
    } 
}。

上記のコードでわかるように、我々は最終的に作成が実際に内部VUEウォッチャーのインスタンスを作成している見ます。まあウォッチャーはVUEの非常に重要な部分である、それはデータ駆動型の不可欠な部分です。

そして、おそらく新ウォッチャー機能が何であるかについて話しています。

5.新しいウォッチャー

新しいウォッチャーは、ウォッチャーを作成し、属性を聞いての実装を更新する機能を得ることにVUE。

ウォッチャーは、それが「更新動作をリッスン」と更新機能を実行し、加入者です。

なぜ二重引用符？実際には、それは聞いていません。例えば次のように元のコードの更新は、次のとおりです。

内部1. VUE新しいウォッチャーウォッチャーは、のインスタンスを作成します

2.ウォッチャーインスタンス（原理のデータ駆動型の知識）にオブザーバdata.msgに添加した場合、独自に作成します

3.私たちは、MSGの値を変更し、MSGオブザーバーはウォッチャー以上のものを含め、すべてのオブザーバに通知します。（データ駆動型知識の原理）

4.ウォッチャートリガーと更新コールバックので、私たちは関数宣言を実行します。

終了

時計の実装は、非常に簡単ですObject.defileProperty、発、ウォッチャーいくつかの部分で実装VUEデータ駆動型の原則は、が必要です。この部分を学ぶために行くことができます理解していません。