vueインスタンスの双方向バインディングソースコードを解釈する

Vueは、MVVMに基づいてデータ操作を実行するプログレッシブな純粋なフロントエンドJavaScriptフレームワークです。

まず、MVVMとは何かを最初に理解しましょう。

MVVM（Model—View—ViewModel）モードは、次の3つのブロックに分かれています。

1.モデル：モデルデータ、つまりインスタンスのすべてのデータを保持するオブジェクト-----データには、ビジネスロジックが含まれています。

2.表示：ビュー、インターフェース全体のレイアウトと外観。

3. ViewModel：ビューとモデルの「大使」として機能するビューモデルは、ビューとモデルをバインドし、ビューのビジネスロジックを実装します。

第二に、Vueデータの双方向バインディングの原則

原則：主にObject.defineProperty（）メソッドを使用して、データのハイジャックとパブリッシャーサブスクリプションモデルとの連携を行います。

1. Object.defineProperty（）：

var vm = new Vue（{ 
    data：{ 
        obj：{a： 1 } 
    }、
    created（）{ 
        console.log（this .obj）; 
    } 
}）;

属性aには2つの対応するgetメソッドとsetメソッドがあることがわかりますが、なぜメソッドが2つあるのですか？VueはObject.defineProperty（）を介してデータハイジャックを実装するためです。列挙できるかどうかに関係なく、オブジェクト属性のいくつかの固有の操作（読み取り権や書き込み権など）を制御できます。ここでは、主に、それに対応するget属性とget属性の2つの説明を調べます。

2.データハイジャック：vueがインスタンス化されると、すべての属性をトラバースし、getおよびsetメソッドをこれらの属性に追加して、データハイジャックを実行します（データのgetおよびsetメソッドをオーバーライドします）。

3.パブリッシャーサブスクリプションモデル：https : //www.jianshu.com/p/2ec316ca0f8b

3.特定の実装：

　　以前のデータは、データハイジャックを実行する前に、結合双方向に乗っ取ら述べたように、あなたは監視する必要があるかどうか、データの変更（オブザーバーリスナー） ;加入者のニーズに耳を傾けるために変更がある場合に変更するかどうかを指示する必要があります（ウォッチャー加入者）がある場合、および多くのサブスクライバーには、多数のサブスクライバーを管理するためのマネージャーが必要です（Depサブスクリプションマネージャー）。次に、各ノードをスキャンして解析するコマンドパーサー（v-onなどのノード解析命令）が必要です。、それらをサブスクライバーウォッチャーに初期化し、対応する関数（コンパイル命令パーサー）をバインドします。ウォッチャーは、変更前と変更後の2つの値を比較し、ビューに再レンダリングを通知するかどうかを決定します。

この図はより明確になるはずです。

なすべきこと：

1.リスナーObserverを実装して、すべてのプロパティをハイジャックおよび監視し、変更がある場合はサブスクライバーに通知します。

2.サブスクライバーウォッチャーを実装して、リスナーの属性の変更の通知を受け取り、対応する関数を実行してビューを更新します。

3.多くのサブスクライバーを管理するために使用されるサブスクライバーマネージャーDepを実装します。

4.各ノードの関連する命令をスキャンおよび解析し、テンプレートデータとサブスクライバーを初期化するために使用されるパーサーコンパイルを実装します。

4番目に、最初にObject.defineProperty（）メソッドを知って、データハイジャックを実現します（上書きメソッド）

// オブジェクトのプロパティへの通常のアクセス
var Book = { 
  name： 'vue Authoritative Guide' 
}; 
console.log（Book.name）; // Vue   Authoritative Guide

本のタイトルにconsole.log（book.name）の実行中にタイトル番号を直接追加したい場合は、どうすればよいですか？つまり、Bookオブジェクトのプロパティ値をリッスンする対象です。この時点でObject.defineProperty（）が役立ちます。コードは次のとおりです。

let Book = {}; 
let name = '' ; 
Object.defineProperty（Book、 'name' 、{ 
    set（value）{ 
        name = value; 
        console.log（ '本に名前を付けた：' + value）; 
    } 、
    get（）{ 
        return '《' + name + '》' 
    } 
}）; 
Book.name = 'vue権威あるガイド' ; //本のタイトルに名前を付けました：vue権威あるガイド 
console.log（Book.name）; / /「Vueの決定的なガイド」

//継続する

参照：https : //www.jianshu.com/p/5fe2664ff5f7

リファレンス：https : //www.cnblogs.com/libin-1/p/6893712.html

リファレンス：https : //segmentfault.com/a/1190000014274840#comment-area

vueインスタンスの双方向バインディングソースコードを解釈する

おすすめ