Vue ソースコード学習でレスポンシブ性を実装する方法

オブジェクト.defineProperty(obj, prop, 記述子)
// obj は渡されたオブジェクト、prop は定義または変更されるプロパティ、descriptor はプロパティ記述子です

関数 observe(データ) {
  if (isObject(データ)) {
    Object.keys(data).forEach(キー => {
      defineReactive(データ、キー)
    })
  }
}

関数defineReactive(obj, prop) {
  val = obj[prop]とします
  let dep = new Dep() // 依存関係を収集するために使用しますObject.defineProperty(obj, prop, {
    得る（） {
      // オブジェクト プロパティにアクセスすると、現在のオブジェクト プロパティが依存しており、依存関係が収集されることを示します dep.depend()
      戻り値
    }
    set(newVal) {
      (newVal === val)の場合、戻り値
      // データが変更されたので、関係する担当者に通知して対応するビューを更新する必要があります val = newVal
      dep.notify()     
    }
  }) 
  // ディープモニタリング if (isObject(val)) {
    観察(値)
  }
  オブジェクトを返す
}

関数Dep() {
  // deps配列を使用してさまざまな依存関係を保存します this.deps = []
}
// Dep.target は、グローバルに一意の Watcher である実行中のウォッチャーインスタンスを記録するために使用されます。 
// これは非常に巧妙な設計です。JS はシングルスレッドなので、同時に計算できるグローバル Watcher は 1 つだけです。Dep.target = null

// プロトタイプにdependメソッドを定義し、各インスタンスがアクセスできるようにします。Dep.prototype.depend = function() {
  if (依存ターゲット) {
    this.deps.push(依存関係ターゲット)
  }
}
// プロトタイプに通知メソッドを定義してウォッチャーに更新を通知します Dep.prototype.notify = function() {
  this.deps.forEach(ウォッチャー => {
    ウォッチャー.更新()
  })
}
// Vue にはコンポーネントのネストなどのネストされたロジックがあるため、スタックを使用してネストされたウォッチャーを記録します。 
// スタック、先入れ後出し const targetStack = [] 
関数pushTarget(_target) { 
  if (Dep.target) targetStack.push(Dep.target) 
  依存関係ターゲット = _target 
} 
関数popTarget() { 
  Dep.target = targetStack.pop() 
}

クラスウォッチャー{
  コンストラクタ(expOrFn) {
    // ここで渡されたパラメータが関数でない場合は解析する必要があり、parsePath は省略されます this.getter = typeof expOrFn === 'function' ? expOrFn : parsePath(expOrFn)
    この.get()
  }
  // クラス内で関数を定義する場合は関数を書く必要はありません
  得る（） {
    // 実行のこの時点では、これは現在のウォッチャーインスタンスであり、Dep.target でもあります。
    pushTarget(これ)
    this.value = this.getter()
    ポップターゲット()
  }
  アップデート（） {
    この.get()
  }
}

<テンプレート>
  <div id="app" class="container">
    <h1>こんにちは世界！ </h1>
  </div>
</テンプレート>

// 対応するvnode 
{ 
  タグ: 'div', 
  プロパティ: { id: 'app', クラス: 'container' }, 
  子: { タグ: 'h1'、 子: 'HELLO WORLD! '} 
}

関数 VNode(タグ、データ、子、テキスト、elm) { 
  this.tag = タグ 
  this.data = データ 
  this.childern = 子供 
  this.text = テキスト 
  this.elm = elm // 実際のノードへの参照}

関数sameVNode()
関数sameVnode(a, b) { 
  a.key === b.key && を返します 
  ( a.タグ === b.タグ && 
    a.isComment === b.isComment && 
    isDef(a.data) === isDef(b.data) && 
    同じ入力タイプ(a, b) 
  ） 
 }

関数 updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  oldStartIdx = 0 とする
  newStartIdx = 0 とします
  oldEndIdx = oldCh.length - 1 とします。
  oldStartVnode = oldCh[0]とする
  oldEndVnode = oldCh[oldEndIdx]とする
  newEndIdx = newCh.length - 1 とします。
  newStartVnode = newCh[0]とする
  newEndVnode = newCh[newEndIdx]とします。
  oldKeyToIdx、idxInOld、vnodeToMove、refElm を使用します。
  // 上記は、新しい Vnode と古い Vnode の先頭と末尾のポインタ、新しい Vnode と古い Vnode の先頭と末尾のノードです while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // while条件が満たされない場合は、古いVnodeと新しいVnodeの少なくとも1つが1回走査されたことを意味し、ループを終了します。if (isUndef(oldStartVnode)) {
      oldStartVnode = oldCh[++oldStartIdx] // Vnodeが左に移動されました
    } そうでない場合 (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } そうでない場合 (sameVnode(oldStartVnode, newStartVnode)) {
      // 古いスタートと新しいスタートを比較して、同じノードであるかどうかを確認します patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
      古い開始Vノード = 古いCh[++古い開始Idx]
      新しい開始Vノード = 新しいCh[++新しい開始Idx]
    } そうでない場合 (sameVnode(oldEndVnode, newEndVnode)) {
      // 古い端と新しい端を比較して、同じノードであるかどうかを確認します patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnodeが右に移動
      // 古い開始ノードと新しい終了ノードを比較して、同じノードであるかどうかを確認します。patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(親Elm、oldStartVnode.elm、nodeOps.nextSibling(oldEndVnode.elm))
      古い開始Vノード = 古いCh[++古い開始Idx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnodeが左に移動
      // 古い終了と新しい開始を比較して、同じノードであるかどうかを確認します patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(親Elm、古い終了Vnode.elm、古い開始Vnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      新しい開始Vノード = 新しいCh[++新しい開始Idx]
    } それ以外 {
      // キーを設定する場合と設定しない場合の違い:
      // キーを設定しないと、newCh と oldCh は先頭と末尾のみを比較します。キーを設定すると、先頭と末尾の比較に加えて、キーによって生成されたオブジェクト oldKeyToIdx から一致するノードが検索されます。したがって、ノードにキーを設定すると、DOM をより効率的に使用できます。
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = isDef(newStartVnode.key)
        ? 古いキーからIdx[新しい開始Vノード.キー]
        : findIdxInOld(新しい開始ノード、古いCh、古い開始Idx、古い終了Idx)
      // 古い Vnode シーケンスからキーを持つノードを抽出し、マップに配置してから、新しい vnode シーケンスをトラバースします // vnode のキーがマップ内にあるかどうかを判断します。ある場合は、キーに対応する古い Vnode を見つけます。古い Vnode がトラバースされた vnode と同じ場合は、dom を再利用し、dom ノードの位置を移動します if (isUndef(idxInOld)) { // 新しい要素
        createElm(newStartVnode、insertedVnodeQueue、parentElm、oldStartVnode.elm、false、newCh、newStartIdx)
      } それ以外 {
        vnodeToMove = 古いCh[idxInOld]
        同じVnode(vnodeToMove, newStartVnode)の場合
          パッチVnode(vnodeToMove、newStartVnode、insertedVnodeQueue)
          oldCh[idxInOld] = 未定義
          canMove && nodeOps.insertBefore(親Elm、vnodeToMove.elm、oldStartVnode.elm)
        } それ以外 {
          // 同じキーだが要素が異なる。新しい要素として扱う
          createElm(newStartVnode、insertedVnodeQueue、parentElm、oldStartVnode.elm、false、newCh、newStartIdx)
        }
      }
      新しい開始Vノード = 新しいCh[++新しい開始Idx]
    }
  }
  （古い開始ID＞古い終了ID）の場合{
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    Vnodesを追加します(parentElm、refElm、newCh、newStartIdx、newEndIdx、insertedVnodeQueue)
  } そうでない場合 (newStartIdx > newEndIdx) {
    Vnodes を削除します (親 Elm、古い Ch、古い開始 Idx、古い終了 Idx)
  }
}

for (macroTask の macroTaskQueue) { 
  // 1. 現在のマクロタスクを処理する 
  マクロタスク処理()
  // 2. すべてのMICRO-TASKを処理する 
  (microTaskQueue の microTask) の場合 { 
    マイクロタスクを処理する(マイクロタスク)
  } 
}

getData(res).then(() => { 
  this.xxx = res.データ 
  this.$nextTick(() => { // ここで変更された DOM を取得できます }) 
})