Vueのデータ応答性原則の詳細な説明

定数vm = 新しいVue({
 データ （） {
  戻る {
   カウント: 0,
   人: { 名前: 'xxx' },
   編曲: [1, 2, 3]
  }
 }
})
配列メソッド
function Vue (options) { // ここではデータの操作のみ考慮します let data = options.data
 if (データ) {
  data = this._data = typeof data === 'function' ? data.call(this) : data
 }
 観察者（データ）
}
関数オブザーバー(データ) { 
 if (typeof data !== 'object' || data === null) {
  データを返す
 }
 if (data.__ob__) { // __ob__ 属性が存在するということは、それが傍受されたことを示している return data
 }
 新しいオブザーバー(データ)
}

クラスオブザーバー{
 コンストラクタ（データ）{
  Object.defineProperty(data, '__ob__', { // 配列ハイジャックに必要な、データの __ob__ プロパティを定義します。enumerable: false, // 列挙できません。configurable: false, // 構成できません。value: this // 値は Observer インスタンスです。})
  if (Array.isArray(data)) { //配列をインターセプトする data.__proto__ = arrayMethods //プロトタイプ継承 this.observerArray(data)
  } else { // オブジェクトのインターセプション this.walk(data)
  }
 }
 歩く（データ）{
  定数キー = Object.keys(データ)
  for(let i = 0; i < keys.length; i++) {
   定数キー = キー[i]
   defineReactive(データ、キー、データ[キー])
  }
 }
 observerArray (data) { // 配列内の各項目をインターセプトします data.forEach(value => observer(value))
 }
}

//処理オブジェクトのインターセプト関数 defineReactive(data, key, value) {
 observer(value) // value がまだオブジェクト型の場合は、再帰的にハイジャックする必要があります Object.defineProperty(data, key, {
  得る（） {
   戻り値
  },
  set(新しい値){
   (newValue === value)の場合、戻り値
   値 = 新しい値
   observer(newValue) // newValue 値もオブジェクト型の場合は、ハイジャックする必要があります}
 })
}

const oldArrayPrototype = Array.prototype
配列メソッド = Object.create(oldArrayPrototype)
const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'] // 元の配列を変更できるメソッド methods.forEach(method => {
 配列Methods[メソッド] = 関数(...引数) {
  const result = oldArrayPrototype[methods].call(this, ...args)
  const ob = this.__ob__ // これはメソッドを呼び出す配列です let insert; // 配列に新しく追加された項目のコレクションをインターセプトする必要があります switch(methods) {
   ケース 'プッシュ': 
   ケース 'unshift':
    挿入された = 引数
   ケース 'スプライス':
    insert = args.slice(2) // spliceの2番目のパラメータが追加されるため}
  if (挿入) {
   ob.observerArray(挿入)
  }
  結果を返す
 }
})

定数ハンドラ = {
 取得(ターゲット、キー) {
  （typeof target[key] === 'object' && target[key] !== null）{
   新しいProxy(target[key], handler)を返す
  }
  Reflect.get(ターゲット、キー) を返します。
 },
 （ターゲット、キー、値）を設定する{
  if(key === 'length') が true を返す
  コンソールログ('更新')
  Reflect.set(ターゲット、キー、値) を返します。
 }
}
定数オブジェクト = {
 編曲: [1, 2, 3],
 カウント: { 数値: 1 }
}
// obj はプロキシのターゲット オブジェクト、handler は構成オブジェクトです。const proxy = new Proxy(obj, handler)