大フロントエンド【3-2】Vue応答式原理概要
データ応答式とは、データが変化すると自動的にビューが更新され、domを手動で操作する必要がなく、
第一歩、入口、initState()
vm状態の初期化は、応答式全体がinitメソッドから始まり、initメソッドではinitStateメソッドを呼び出して状態を初期化し、initStateメソッドではinitData()を呼び出し、data属性をvueインスタンスに注入し、observe()を呼び出して応答オブジェクトに変換し、observeは応答式のエントリである
ステップ2、observe(value)
ステップ3、Observe()
ステップ4、defineReactive
getter:各属性に依存を収集し、現在の属性がオブジェクトである場合、オブジェクトの各属性にも依存を収集し、最終的に属性値を返します.
setter:新しい値を保存し、新しい値がオブジェクトである場合はobserveを呼び出し、更新(通知の送信)、dep.notify()を呼び出す
ステップ5、依存収集
watcherオブジェクトのgetメソッドでpushTargetを呼び出すと、現在のwatcherにDep.target属性が記録され、アクセスしたdataメンバーのときに依存が収集され、アクセス値のときにdefineReactiveのgetterで依存が収集され、属性に対応するwatcherオブジェクトがdepのsubs配列に追加され、属性がオブジェクトであればchildObに依存が収集され、サブオブジェクトがメンバーを追加および削除するときに通知を送信することを目的とします.
ステップ6、Watcher
データが変化するとdep.notify()が呼び出され、watcherオブジェクトのupdate()メソッドが呼び出され、updateメソッドではqueueWatcher()が呼び出され、メソッドではwatcherが処理されているか否かが判断され、そうでない場合はqueueキューに追加され、flushSchedulerQueue()を呼び出してタスクキューをリフレッシュし、flushSchedulerQueueではbeforeUpdateフック関数がトリガーされ、そしてwatcherを呼び出す.run()をクリアし、前回の依存をクリアし、activedフック関数をトリガし、updateフック関数をトリガします.
第一歩、入口、initState()
vm状態の初期化は、応答式全体がinitメソッドから始まり、initメソッドではinitStateメソッドを呼び出して状態を初期化し、initStateメソッドではinitData()を呼び出し、data属性をvueインスタンスに注入し、observe()を呼び出して応答オブジェクトに変換し、observeは応答式のエントリである
ステップ2、observe(value)
src/core/observer/index.jsに位置し、まずvalueがオブジェクトであるか否かを判断し、オブジェクトが直接戻ってこなければvalueオブジェクトが存在するか否かを判断する__ob__は、valueが応答化処理を行ったことを証明し、応答式データである場合に直接戻り、ない場合は第3ステップでobserverオブジェクトを作成し、それを返す.ステップ3、Observe()
src/core/observer/index.jsに位置し、valueオブジェクトに枚挙にいとまがない__ob__属性を定義し、現在のobserverオブジェクトを記録し、配列の応答化処理を行い、配列中のメソッドpush、pop、sortなどを設定する.これらのメソッドは元の配列を変更するので、これらのメソッドが呼び出されると通知が送信され、observeオブジェクト中のdepが見つかり、dep.notify()メソッドが呼び出される.次に配列内の各メンバーを呼び出して応答化処理を行い、メンバーがオブジェクトであれば応答式オブジェクトに変換し、valueがオブジェクトであればwalk()を呼び出し、オブジェクト内の各メンバーを遍歴してdefineReactive()を呼び出すステップ4、defineReactive
src/core/observer/index.jsは、各属性に対してdepオブジェクトを作成し、現在の属性がオブジェクトである場合、observe()を再帰的に呼び出す.getter:各属性に依存を収集し、現在の属性がオブジェクトである場合、オブジェクトの各属性にも依存を収集し、最終的に属性値を返します.
setter:新しい値を保存し、新しい値がオブジェクトである場合はobserveを呼び出し、更新(通知の送信)、dep.notify()を呼び出す
ステップ5、依存収集
watcherオブジェクトのgetメソッドでpushTargetを呼び出すと、現在のwatcherにDep.target属性が記録され、アクセスしたdataメンバーのときに依存が収集され、アクセス値のときにdefineReactiveのgetterで依存が収集され、属性に対応するwatcherオブジェクトがdepのsubs配列に追加され、属性がオブジェクトであればchildObに依存が収集され、サブオブジェクトがメンバーを追加および削除するときに通知を送信することを目的とします.
ステップ6、Watcher
データが変化するとdep.notify()が呼び出され、watcherオブジェクトのupdate()メソッドが呼び出され、updateメソッドではqueueWatcher()が呼び出され、メソッドではwatcherが処理されているか否かが判断され、そうでない場合はqueueキューに追加され、flushSchedulerQueue()を呼び出してタスクキューをリフレッシュし、flushSchedulerQueueではbeforeUpdateフック関数がトリガーされ、そしてwatcherを呼び出す.run()をクリアし、前回の依存をクリアし、activedフック関数をトリガし、updateフック関数をトリガします.