詳細な応答原則
私たちはすでに基本的なコンテンツのほとんどについて話してきましたが、今度は基礎となるコンテンツについてお話します。 Vue.jsの最も重要な機能の1つは応答システムです。モデルは通常のオブジェクトであり、それを変更するとビューが更新されます。これにより、国家管理は非常にシンプルで直感的になりますが、その原則を理解することも重要であり、いくつかの一般的な問題を回避できます。次に、Vue.js応答システムの根底にある詳細を深く掘り始めます。
変更を追跡する方法
データオプションとして通常のオブジェクトをVUEインスタンスに渡すと、Vue.jsはそのプロパティを通過し、Object.definePropertyを使用してGetter/Setterに変換します。これはES5機能であり、パッチでは実装できません。これが、Vue.jsがIE8以下をサポートしていない理由です。
ユーザーはゲッター/セッターを見ることができませんが、内部的にはvue.jsに依存関係を追跡し、プロパティにアクセスして変更されたときに変更を通知します。問題の1つは、ブラウザコンソールにデータオブジェクトを印刷すると、VM。$ log（）インスタンスメソッドを使用すると、よりフレンドリーな出力を取得できる場合、Getter/Setterのフォーマットが異なることです。
テンプレート内の各命令/データバインディングには、対応するウォッチャーオブジェクトがあり、計算プロセス中の属性を依存関係として記録します。その後、依存するセッターが呼び出されると、ウォッチャーの再計算がトリガーされ、それがそれに関連する指示がDOMを更新するようになります。
検出の問題を変更します
ES5の制限により、VUE.JSはオブジェクトプロパティの追加または除去を検出できません。 Vue.jsはインスタンスを初期化するときにプロパティをGetter/Setterに変換するため、Vue.jsがそれを変換して応答性を高めるために、プロパティがデータオブジェクト上にある必要があります。例えば：
var data = {a：1} var vm = new vue（{data：data}）// `vm.a`および` data.a`はレスポンシブvm.b = 2 // `vm.b`は応答性がありません。ただし、インスタンス作成後に属性を追加し、応答性を高める方法があります。
Vueインスタンスの場合、$ set（key、value）インスタンスメソッドを使用できます。
vm。$ set（ 'b'、2）// `vm.b`および` data.b`が応答します
通常のデータオブジェクトの場合、グローバルメソッドVue.set（オブジェクト、キー、値）：
vue.set（data、 'c'、3）// `vm.c`および` data.c`が応答します
Object.Assign（）または_.Extend（）を使用してプロパティを追加するなど、既存のオブジェクトにプロパティを追加する場合があります。ただし、オブジェクトに追加された新しいプロパティは更新をトリガーしません。現時点では、元のオブジェクトのプロパティと新しいプロパティを含む新しいオブジェクトを作成できます。
// `object.Assign（this.someObject、{a：1、b：2}）` this.someObject = object.Assign（{}、this.someObject、{a：1、b：2}）を使用しないでください。また、以前にリストレンダリングで議論されてきたアレイ関連の問題もいくつかあります。
データを初期化します
Vue.jsは応答属性を動的に追加するAPIを提供しますが、データオブジェクト上のすべての応答属性を宣言することをお勧めします。
これをしないでください：
var vm = new vue（{template： '<div> {msg}} </div>'}）//これを行う：
var vm = new vue（{data：{// declare `msg`msg： ''}、template： '<div> {{msg}} </div>'}）//その後、` msg`vm.msg = 'hello！'これを行う理由は2つあります。
1.データオブジェクトは、コンポーネント状態のスキーマのようなものです。 IT上のすべてのプロパティを宣言すると、コンポーネントコードが理解しやすくなります。
2.トップレベルの応答プロパティを追加するすべてのウォッチャーは、以前に存在せず、ウォッチャーが追跡していないため、再計算します。このパフォーマンスは通常、（特にAngularの汚れたチェックと比較して）許容されますが、初期化時には回避できます。
非同期更新キュー
vue.jsはデフォルトで非同期にDOMを更新します。データの変更が観察されるたびに、Vueは同じイベントループですべてのデータ変更をキャッシュするためのキューを開始します。ウォッチャーが複数回解雇された場合、それは一度キューに押し込まれます。次のイベントループまで待つと、Vueはキューをクリアし、必要なDOM更新のみを実行します。 MutationObserverは内部非同期キューで好まれ、サポートされていない場合はSetimeout（FN、0）が使用されます。
たとえば、vm.somedata = 'new Value'セットでは、DOMはすぐに更新されませんが、次にイベントループがキューをクリアするときに更新されます。基本的にこのプロセスを気にする必要はありませんが、DOMステータスが更新された後に何かをしたい場合に役立ちます。 Vue.JSは、開発者がデータ駆動型のアプローチに従い、DOMを直接変更することを避けることを奨励していますが、それは時々そうします。 Vue.jsがデータの変更後にDOMの更新を完了するのを待つために、データが変更された直後にVue.nexttick（コールバック）を使用できます。 DOMアップデートが完了した後、コールバックが呼び出されます。例えば：
<div id = "example"> {{msg}} </div>
var vm = new vue（{el： '#example'、data：{msg： '123'}}）vm.msg = 'new message' // data vm。$ el.textcontent === 'new message' // falsevue.nexttick（function（）{vm。このインスタンスメソッドは、グローバルVUEを必要としないため、より便利です。このコールバックは、現在のVUEインスタンスに自動的にバインドされています。
vue.component（ 'example'、{template： '<span> {{msg}} </span>'、data：function（）{return {msg： 'not updated'}}、methods：{updatemessage：function（）{this.msg = 'updated' console.log （）{console.log（this。$ el.textcontent）// => 'updated'}）}}}）コンピューティング属性の秘密
vue.jsの計算されたプロパティは単純なゲッターではないことに注意してください。計算プロパティは、その応答依存関係を継続的に追跡します。計算されたプロパティを計算するとき、vue.jsは依存関係リストを更新し、結果をキャッシュします。キャッシュされた結果は、依存関係の1つが変更された場合にのみ無効です。したがって、依存関係が変更されない限り、計算されたプロパティにアクセスすると、ゲッターを呼び出す代わりに、キャッシュされた結果を直接返します。
なぜキャッシュするのですか？大量の計算プロパティAがあるとします。これは、巨大な配列を繰り返し、多くの計算を行う予定です。次に、Aに依存する他の計算プロパティがある場合があります。キャッシュがない場合、必要以上にAのゲッターを何度も呼び出します。
計算されたプロパティはキャッシュされているため、ゲッターがアクセスするときに常に呼び出されるとは限りません。次の例を考えてみましょう。
var vm = new vue（{data：{msg： 'hi'}、computed：{example：function（）{return date.now（） + this.msg}}}）計算されたプロパティの例には、依存関係が1つしかありません。 date.now（）は、Vueのデータ観測システムとは何の関係もないため、応答依存関係ではありません。したがって、vm.exampleにアクセスすると、vm.msgが変更されない限り、タイムスタンプは変更されないことがわかります。
時々、GetterがVm.exampleにアクセスするたびに元の動作を変更せず、Getterに電話しないことを願っています。この時点で、指定された計算属性のキャッシュをオフにすることができます。
計算：{example：{cache：false、get：function（）{return date.now（） + this.msg}}}}}}vm.exampleにアクセスするたびに、タイムスタンプは新しいものです。ただし、JavaScriptにアクセスすることはこのようなものです。データバインディングは、依然として依存関係によって駆動されます。計算された属性{{例}}がモジュールにバインドされている場合、応答依存関係が変更された場合にのみDOMが更新されます。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。