Angular と Vue の間の双方向データ バインディングの実装原理 (vue の双方向バインディングに焦点を当てています)

高度な JavaScript プログラミングに関するメモを整理しているときに、オブジェクト指向の設計に関する章を見つけました。通常使用する JS オブジェクトの 90% 以上がデータ属性とアクセサー属性に分かれていると記載されていました。データ属性; データ属性とアクセサー属性について常に説明します。

データ属性: データ値の場所が含まれており、値を読み書きできます。

アクセサー属性: データは含まれません。値には、ゲッター関数とセッター関数のペアが含まれます。アクセサー プロパティを読み取るときは、有効な値を返す役割を担うゲッター関数が呼び出され、新しい値が渡されます。

ここでの紹介の焦点はアクセサー プロパティです。オブジェクトのアクセサー プロパティを設定するには、es5 の Object.defineProrerty() メソッドのみを使用できます。 .year=2005 が実行されると、実際に実行されます。book.year を実行すると、year の get メソッドが実行されます。

この原則が原則です。 vue の双方向データ バインディングでは、vue コンポーネント内にいます。属性データを宣言するとき、オブジェクトは実際にこの属性をアクセサー属性にカプセル化しています。

各属性には get メソッドと set メソッドがあり、双方向データの制御があります。は get および set メソッド内にあります。これは、準備ができている (2.0 でマウントされている) か、ビュー内の値を変更しているかに関係なく、set メソッドがトリガーされ、新しい値がそこにコピーされ、ビュー内の値と再度照合されるためです。もちろん、get メソッドを使用すると、取得した属性値を常に最新の値に保存できます。簡単に言うと、新しい値が取得されたかどうかを監視します。この方法にはタイミングが必要です。監視した結果、HTML5 ソケットをバックグラウンド アクティブ メッセージ プッシュ フロント エンドとして使用した場合と、フロント エンドとして使用した場合のパフォーマンスの違いのような気がします。 JS タイマーを使用してバックグラウンドにリクエストを送信し、5 秒ごとにメッセージをキャプチャします

Vue のデータ層は実際には単なる装飾であると常に考えていましたが、API が計算された属性を検出した後、データ層は関数を完全に実装できます。 Ajax を送信して番号を取得する必要はありません。これは準備完了 (2.0 がマウントされています) であり、データのフォーマットまたはページの動的効果の制御のみを行うことができます。この JS の構造はバックグラウンド MVC と同じくらい明確で階層的です。これは私が突然思いついたアイデアであり、vue を使用している友人にアイデアを提供するためのものです。

var book={
_year:2004,
edition:1
};
Object.defineProperty(book,"year",{
get:function () {
return this._year
},
set:function (newValue) {
if(newValue>2004){
this._year=newValue;
this.edition+=newValue-2004;
}
}
});
book.year=2005;
alert(book.edition);//2
console.log(book.year);//2005

。