VUE関連知識点

VUE関連知識点vueは、MVVMモード(model-view-viewmodel)を採用したユーザインタフェースを構築するためのフレームワークであり、modelは対応するデータであり、viewはhtmlであり、viewmodelはvueインスタンス対応コードであり、以下のコードフラグメントを参照する.

  
    
       
         
         
          
   
   
     //View
    

       {{message}}
    
    
   //Model
   var exampleData = {
     message: 'Hello Vue!'
   }
   //ViewModel
   var app = new Vue({
       el: '#app',
       data: exampleData
   })
 
 

vueはデータを駆動し,DOMをデータにバインドし,両者は同期を保つ.
vueは双方向データバインディングを実現するためにv-model=“xxx_feild”を使用し、原理はdata bindingsとdom listenersを使用することが双方向データバインディングを実現する鍵であり、dom listenersはdomの変化を傍受し、いったん変化すると、対応するデータも変化する.Data bindingsは傍受データの変化であり,変化すると対応するdomも変化する.
vueの特徴:

ページ構造明瞭簡潔htmlテンプレート+データ+vueインスタンス+スタイル

コンポーネント化:保守性、多重性+デカップリング

データ駆動dom操作(fragmentドキュメントクリップを使用)を低減し、パフォーマンスを向上させる

軽量級

ドキュメントが揃っています簡単

まとめ:
vueはmvvmフレームワークを用い,データを駆動し,双方向データバインドを実現した.主な点は、軽量レベル、ドキュメントが簡単で使いやすいvueファミリーバケツ、後方互換性があり、dom操作のコンポーネント化を減らしやすく、メンテナンスが容易であることです.
双方向データバインドを実現する原理はobjectを利用することである.defineProperty(obj,key,options{enumable configurable get set})は、オブジェクトデータのset getメソッドを書き換え、データの変更のデフォルト動作を変更します.a)dom要素は、データ上でdom要素を傍受するonchangeなどのイベントが最新の値を取得してsetすることを変更する価値がある.b)データの変更を要素に反映してデータを傍受するsetメソッドはsetメソッドでnewval oldvalの違いを検出してdomの更新などを行う.
new VUE({el:'#id',data: {}}); VUEのコンストラクション関数では、データのモニタリング登録observe、すなわちObjectを利用する.definePropertyはデータのモニタリングを行い、データの変化を検出した場合、対応するview更新を行う.同時にエントリ要素を解析し、documentFragmentを利用して各種指令、要素タイプの判断を行い、同時にonchange、keyupなどの関連イベントのバインドを行い、データの更新を行い、データとバインドを行い、解析はdomドキュメントに挿入され、dom操作を減らす.更新に関するモード:観察者、購読者モード、1つの変更、複数の応答更新.
参考:【よく書けました】https://www.cnblogs.com/libin-1/p/6893712.html http://www.92to.com/bangong/2016/12-14/14476078.html