データ変更を監視するためのVue2.XコアAPI — Object.defineProperty

Vue2.X監視データ変更のコアAPI—Object.definePropertyは基本的に以下を使用します：

Object.definePropertyはレスポンシブを実装します

1.監視オブジェクト（単純なオブジェクト）

 

 

 

 

 

 上記によっての理解リスニングGET、セット方法データの変更、ひいては応答を達成することができます。

2.複雑なオブジェクト（詳細な監視）、詳細な監視

ビューを更新するトリガー

// 更新ビュー
関数updateView（）{ 
    console.log（ 'View update' ）
}をトリガーします

上記の例のデータに加えて：

// データの準備 
const data = { 
    name： 'Page' 、
    age： 20 、
    info：{ 
        address： 'Ningbo'   // 綿密な監視が必要
    }、
}

 

// プロパティを再定義し、それをリッスンします
function defineReactive（target、key、value）{
     // Core API 
    Object.defineProperty（target、key、{ 
        get（）{ 
            return value 
        }、
        set（newValue）{ 
            if（newValue！== value）{
                 // 新しい値を設定します
                // 値は常にクロージャ内にあることに注意してください。ここで設定した後、再度取得したときに最新の値を取得し 
                ますvalue = newValue 

                // トリガー更新ビュー
                updateView（）
            } 
        } 
    }）
} 

// オブジェクト属性
関数オブザーバをリッスンします（ターゲット）{
     if（typeof target！== 'object' || target === null ）{
         // オブジェクトまたは配列ではない
        return target 
    } 
    // （for
     key in target traverse）for（let key in target）{ 
        defineReactive（ターゲット、キー、ターゲット[キー]）
    } 
}

// 監視データ 
オブザーバー（データ）

 

 

 

現時点では、上記のサンプルコードをリッスンしていません。

 

 

この時点で最適化し、defineReactiveメソッドに監視のレイヤーを追加します。

// プロパティを再定義してリッスンします
function defineReactive（target、key、value）{
     // ディープリスニング
    オブザーバー（value）
     // コアAPI 
    Object.defineProperty（target、key、{ 
        get（）{ 
            戻り値
        }、
        set（newValue ）{ 
            if（newValue！== value）{ 
              
                // 新しい値を設定
                // 値は常にクロージャ内にあることに注意してください。ここで設定した後、再度取得すると最新の値が取得され 
                ますvalue = newValue 

                // ビューを更新するトリガー
                updateView（）
            } 
        } 
    }）
}

      深く監視できます。

 

 

       上記の2つの例では、data.age = {num：21}は監視できますが、data.age.num = 22は監視できません。

      defineReactiveメソッドで、Object.definePropertyのメソッドと、ディープリスナーオブザーバー（newValue）とリスナーのレイヤーを設定します。

// プロパティを再定義してリッスンします
function defineReactive（target、key、value）{
     // ディープリスニング
    オブザーバー（value）

    // コアAPI 
    Object.defineProperty（target、key、{ 
        get（）{ 
            戻り値
        }、
        set（newValue ）{ 
            if（newValue！== value）{
                  // ディープモニタリング
                オブザーバー（newValue）

                // 新しい値を設定
                // 値は常にクロージャ内にあり、ここで設定した後、最新の値を取得すると取得します 
                value = newValue 

                // 更新ビューを更新
                updateView（）
            } 
        }  
    }）
}

 

 

  リスナー配列：

 

 

 

3.いくつかの欠点

1.詳細な監視には最後まで再帰が必要であり、1回の計算が大きい（上記の例を使用）
2.新しい属性が追加され、監視ができないため、Vue.setがある

3.属性を削除します。すべてを聞くことはできませんVue.delete