Vueの双方向バインドv-model

2806 ワード
vueの双方向バインドの理解を続ける
まず、双方向バインドの役割は、view-->model/model-->viewを達成してmvvmを達成するために、この効果を実現するために、以下の3つのステップに分けて操作することである.
  • v-model,{{...}},入力ボックスとテキストノードとdataのバインド
    • を実現する.
  • view-->model,input入力ボックスが変更された場合、データモデル(v-textまたは{}}})のデータ
    • を変更する
  • model-->view、データモデルのデータは、様々な操作によって変更する場合、inputの値は
    • を自動的に変更する必要がある.
    1.ドキュメントクリップを使用してノードを処理し、マウントされたターゲットサブノードをハイジャックしてからビューに戻る
    DocumentFragment(ドキュメントクリップ)は、複数のサブノードを含むノードコンテナと見なすことができ、DOMに挿入すると、サブノードのみがターゲットノードを挿入するので、ノードのセットのコンテナと見なすことができます.DocumentFragment処理ノードを使用すると、DOMを直接操作するよりも速度とパフォーマンスが大幅に優れています.Vueがコンパイルされると,マウントターゲットのすべてのサブノードをDocumentFragmentにハイジャック(本当にハイジャック)し,処理後,DocumentFragment全体をマウントターゲットに挿入する.
    2,アクセサ属性を利用してview変更を実現しmodelを変更する
    アクセサ属性のsetリスニングによりviewが変更されるとdataのtextをvmのアクセサ属性にハイジャックする(アクセサ属性が優先的にアクセスされるため、同名の属性は無視されるためハイジャックと呼ぶ)
    Object.defineProperty(obj，"a"，{
      get:function(){}，
      set:function(newVal){
            //  node text    
      }
})

    入力ボックスにデータを入力すると、まずinputイベント(またはkeyup、changeイベント)がトリガーされ、対応するイベントハンドラでは、入力ボックスのvalueを取得し、vmインスタンスのtext属性に値を付与します.我々はdefinePropertyを利用してdataのtextをvmのアクセサ属性にハイジャックするのでvmに与える.textが値を割り当てるとsetメソッドがトリガーされます.setメソッドでは主に2つのことをします.1つ目は属性の値を更新し、2つ目はタスク3に残してからにします.
    3,パブリッシング-購読者モード
    modelのdata送信が変更された場合、viewを変更する必要がある.まず、ここでの購読者はv-textやv-modelや{}}などであり、vmに新しいdataが戻るたびにdepトピックオブジェクトが追加され、命令によりこのdataがバインドされるとwatcher(Depには一時的に追加されない)が生成され、set(パブリッシャとして)がトリガーされた後、購読者watcherに通知され、対応する操作が実行される.watcherは以下のことをしました
  • は、グローバル変数Dep.target
    • に自身を付与する.
  • はさらにwatcher getメソッドをトリガし、 get は対応する属性の値を取得し、 get
    • をトリガする.
  • get グローバルDep属性が空でないことを検出すると、このwatcherをdataのdepトピックオブジェクトに追加し、属性の値をwatcherに返す.value中
  • その後wather get は次のステップを実行する.valueはthis.node.nodeValueに値を割り当て、ビューを更新する.
  • 最後に、グローバル変数Dep.targetをnull、Dep.targetをwatcherとトピックオブジェクトdepとのコミュニケーションの唯一の橋渡しとし、使用後は空に保つ.

    • 尤に大いにコールを...
    Vueの双方向バインドv-modelと{}}を再理解する
    1,まずview-->modelの変更によってよく傍受される.changeというイベントの傍受があるため,inputデータが変化するたびにelバインドされたdataのデータが動的に変化する.
    2、ポイント、vueインスタンスでは、新しいdataオブジェクトが1つずつ表示されます.
    最初のステップは、パブリッシャを設定し、Objectを利用する.definePropertyはオブジェクト属性の変化をリスニングしますが、このとき私たちはこの値の変化をリスニングしただけで、本当のWatchサブスクライバはまだ追加されていません.
    第2のステップでは、ドキュメントモデルを解析し、v-modelまたは{}}に遭遇するたびにwatcherインスタンスを新規作成し、updateの更新関数を転送し、この更新関数を実行するとビューが応答して変更されます.
    第3のステップでは、newのwatcherがdep.targetに自身をキャッシュするたびに、watcherはパブリッシャのgetter関数を強制的にトリガーし、getter関数はdep.targetが空ではないと判断した後、watcherをDepミドルウェアのsub配列に追加し、dep.targetを空に設定します.このとき、watcherを設定する必要があるドキュメントノードごとに設定します.
    第4のステップでは、dataが変更されるたびにsetterメソッドがトリガーされ、属性値が変更され、depに応答するwathcerの前に伝わるupdate関数がトリガーされ、対応するサブスクライバに通知され、すべてのサブスクライバがupdateされ、ビューの値が更新される.
    TypeScript での型バリデータの構成
    TypeScript で compose 関数を入力する