最もユニークな特性であるヴュー、一非侵襲的応答システム。
応答性の原則:データ変更、変更ページ
どのようにVueのトラックの変更
通常のJSは、例として、Vueの中で渡されたオブジェクトときにデータオプション、Vueのは、このオブジェクトのすべてのプロパティを通過し、そして使用するObject.definePropertyをにこれらの属性のすべてを置くゲッター/セッター。Object.definePropertyはVueのは、ブラウザのIE8およびそれ以前のバージョンをサポートしていない理由であるシム特性、ES5ではありません。
Object.defineProperty(OBJ、小道具、記述子)
//記述二つの主要な形式があります:データ・アクセス記述子と記述は、記述子には2つの形式ではなく、両方のいずれかでなければなりません
//データ記述子
記述子: {
設定可能:偽、偽の//デフォルト、構成可能ではない示す
enumarable:falseに偽、//デフォルト値を、列挙されていない示す
値:不定に対応//属性値
書き込み可能:falseに偽//デフォルトは、書き込みしない示す
}
//アクセスディスクリプタ
ディスクリプタ:{
設定可能:falseに、//上記
列挙:偽、//上記
の方法は、(){}を取得し、全くゲッターがない場合プロパティに提供//ゲッターたundefined
セット(){} // A何セッターがなかった場合は、セッタープロパティメソッドに提供 }undefined
これらのゲッター/セッターは、ユーザーには見えませんが、内部的には、依存関係を追跡するのVueができましょう特性の変化がアクセスされ、修正さに気づきます。
ウォッチャ・コンポーネント・インスタンスへの各インスタンスの対応は、それを過依存レンダリングプロセスコンポーネントの「連絡先は」属性データとして記録されます。セッター/ゲッタートリガ後の依存性は、それがそうすることを、ウォッチャー通知されますときに関連したコンポーネントを再レンダリング。
変更を検出
現代は、(非同期オブジェクトを変更を監視するために----とObject.observe。オブジェクト属性が変更されると、この方法は、順序付けられたストリームが放棄された修正するためにコールバック関数を提供する)JSを制限し、 Vueの追加または削除されたオブジェクトのプロパティを検出することができません。属性は、データ主体ために存在しなければならないので、Vueが応答のタイプに変換します。
インスタンスが作成されたために、Vueが動的に追加することができ応答特性のルートレベルを。しかし、使用して、Vue.set(オブジェクト、プロパティ名、値)メソッドが応答特性のネストされたオブジェクトに追加し、内部的に使用されobject.defineProperty。
Vue.set(vm.someObject、 'B'、2)
また、使用することができます$セットをVM。また、グローバルであるインスタンスメソッド、Vue.setの別名方法を:
この。$セット(この .someObject、 'B'、2)
時々、オブジェクトをそのような、しかし、この新しいプロパティは、オブジェクトに追加されObject.assign()または_.extend()更新されませんを使用して、新しいプロパティの数を割り当てることが必要な場合があります。この場合、あなたは元のオブジェクトに新しい属性ポイントを作ることができるオブジェクトで混合されるプロパティに新しいオブジェクトを作成する必要があります。
この .someObject = Object.assign({}、この .someObject、{1、B:2})
声明応答特性
Vueのはに許可されていないので、あなたものみNULL値ならば、すべてのプロパティを宣言するように応答ルートレベルの前にインスタンスを初期化しなければならないので、動的に、ルートレベルの応答性のプロパティを追加します。メッセージは、データオプションで宣言されていない場合は、Vueの機能をレンダリングする警告が表示されますアクセスしようとしているではありません既存のプロパティ。
このような制限は技術的な理由の背後にある、それはまた、より良い例Vueのタイプ検査システムの仕事と、境界依存関係の追跡システムの種類のケースを排除します。:同じタイムコードの保守にも一つの重要な考慮有するdata
構造部品の状態(スキーマ)のようなオブジェクト。部品コードより簡単にできるように反応する性質の事前のすべてのステートメントは、変更または読み込むための他の開発者に、将来的に理解します。
非同期更新キュー
DOMでのVueが更新され、非同期的に実行します。限り、リスナーがデータを変更すると、Vueがキューを開くと、すべてのデータ変更が同じイベントループ内で発生バッファます。複数のトリガー同じウォッチャーなら、それは一度だけキューにプッシュ。不要な計算やDOM操作を避けるために、バッファ内のこの重複除外データは非常に重要です。
その後、で次のイベントループ「ダニ」 Vueのリフレッシュキュー、中実(すでに重複排除)の作業を行います。Vueが内部でネイティブ非同期キューを使用しようとPromise.then、MutationObserverとsetImmediateそれが使用されます、実行環境がサポートされていない場合は、setTimeoutメソッド(FN、0)を所定の位置に。
イベントループ「チック」なので、次の更新コンポーネントになります。あなたが何かをする更新DOMに基づいて状態を望むのであれば、それは難しいだろう。このため、Vueのは、データの更新が完了DOMた後Vueの変更を待つために、あなたはデータが変更された直後Vue.nextTick(コールバック)を使用することができ、nextTickを提供しています。更新が完了DOMした後ので、コールバック関数が呼び出されます。
応答アナログ実装
DOM構造:
<! - DOM结构- > <DIV ID = "テスト"> </ div> <ボタンのonclick = "変更()">変更</ボタン>
JSコード:
変化関数(){ data.age = 999 } データ= {せ } 年齢= 2せ LET =のdocument.getElementById試験( "試験") test.innerHTML =年齢 Object.defineProperty(データ、 '年齢'、{ GET() { 戻り年齢 }、 SET(paramsは){ 年齢はparamsは= wathcer() } }) //結合ウォッチャリスニング 機能wathcerを(){ //変更トリガデータの後に、diffは修正がDOMべきかどうかを決定し、実行 renderDom() } / /再レンダリングDOMの 関数renderDom(H){ LET =のdocument.getElementById試験( "試験") させ年齢= data.age test.innerHTML =年齢 }