Vue面接問題のvue MVVMデータバインドを実現

MVVM
MVVMとは?
MVVMはModel-View-ViewModelであり、一つのシステムをモデル(model)、ビュー(view)、view-modelの3つの部分に分ける.vueは典型的なMVVM思想であり、データ駆動ビューである.一般的には、viewレイヤはモデルレイヤと直接通信せず、view-modelレイヤでしか通信できません.
vueにおけるMVVMの理解
vueはMVVMの漸進的なフレームワークであり、MVVMはvueの実際のモードであり、vueフレームワークではデータが自動的にビューを駆動する.vueを書くと、その単一ファイルコンポーネントの開発方法がわかります.Model:データ層は、データそのものに注目するだけで、何の行為にも関心を持っていません.
vueコンポーネントのdata、propsプロパティに対応します.
View:ビューレイヤ、ユーザー操作ページ、view-modelがmodelを更新すると、データバインドでviewに更新されます.
vueコンポーネントのtemplateとstyleの部分に対応します.
View Model:ビジネスロジック層、viewに必要なデータ、View Modelに提供されるデータ、viewにどのような操作があるか、View Modelはこれらの操作に応答します.ViewModelとViewModelの2つのインタラクション:双方向データ転送(データ属性とdata binding)と一方向転送操作(コマンド属性);ViewModelの双方向データバインディングのため、Modelが変化すると、ViewModelが更新され、ViewModelが変化し、Modelも更新されます.
Vueクラスを継承するコンポーネントインスタンスに対応
vueはMVVM思想の下でviewとmodelは直接連絡していないが、viewとview-model、modelとview-modelの間ではインタラクティブである.viewビューでdom操作を行うなどデータを変化させる場合、view-modelでmodelに同期することができ、同じmodelデータの変化もvueに同期することができる.
MVVMのデータバインド実装

パブリッシャー-サブスクリプションモード(backbone.js)

ダーティモード(angular/react)

ハイジャック(vue)

VueはMVVMの双方向バインディングを実現する
vueデータハイジャック結合パブリッシャ-サブスクライバモード
vueは、データハイジャックとパブリッシャー-サブスクライバモードを組み合わせた方式で、Object.defineProperty()で各属性のsetter、getterをハイジャック(傍受)し、データ(対象)が変動したときにサブスクライバにメッセージを送信し、該当する傍受コールバックをトリガーする.したがって、MVVMの双方向バインディングを実現するには、以下の点が必要です.

データリスナーObserverを1つ実現する.データオブジェクトのすべての属性をリスニング(サブ属性オブジェクトの属性を含む)し、Object.defineProperty()属性にsetter・getter(これにより、この属性のある値に値を付与するとトリガーsetterとなり、データの変化をリスニングすることができる)を利用して、変動が発生した場合に最新値を取得し、購読者に通知する.

命令解析器Compileを実現する.vueの各要素ノードの命令をスキャンして解析し、命令テンプレートの変数をデータに置き換え、レンダリングページビューを初期化し、各命令に対応するノードを更新関数にバインドし、傍受データの購読者を追加し、データが変動すると通知を受け取り、更新関数を呼び出してデータ更新を行う.

サブスクライバWatcherを1人実現.WatcherはObserverとCompileの間の通信の橋渡しであり、主なタスクはObserverの属性値が変化したメッセージを購読し、属性値が変化した場合、命令解析器Compileの対応する更新関数をトリガーしてビューを更新することである.

MVVMエントリ関数を実現し、以上の3つを統合する.

Vue面接問題のvue MVVMデータバインドを実現