Object.defineProperty(obj, prop, descriptor)
// obj是傳入的對(duì)象，prop是要定義或修改的屬性，descriptor是屬性描述符

function observe(data) {
  if (isObject(data)) {
    Object.keys(data).forEach(key => {
      defineReactive(data, key)
    })
  }
}

function defineReactive(obj, prop) {
  let val = obj[prop]
  let dep = new Dep() // 用來(lái)收集依賴
  Object.defineProperty(obj, prop, {
    get() {
      // 訪問(wèn)對(duì)象屬性了，說(shuō)明依賴當(dāng)前對(duì)象屬性，把依賴收集起來(lái)
      dep.depend()
      return val
    }
    set(newVal) {
      if (newVal === val) return
      // 數(shù)據(jù)被修改了，該通知相關(guān)人員更新相應(yīng)的視圖了
      val = newVal
      dep.notify()     
    }
  }) 
  // 深層監(jiān)聽
  if (isObject(val)) {
    observe(val)
  }
  return obj
}

function Dep() {
  // 用deps數(shù)組來(lái)存儲(chǔ)各項(xiàng)依賴
  this.deps = []
}
// Dep.target用來(lái)記錄正在運(yùn)行的watcher實(shí)例，這是一個(gè)全局唯一的 Watcher 
// 這是一個(gè)非常巧妙的設(shè)計(jì)，因?yàn)镴S是單線程的，在同一時(shí)間只能有一個(gè)全局的 Watcher 被計(jì)算
Dep.target = null

// 在原型上定義depend方法，每個(gè)實(shí)例都能訪問(wèn)
Dep.prototype.depend = function() {
  if (Dep.target) {
    this.deps.push(Dep.target)
  }
}
// 在原型上定義notify方法，用于通知watcher更新
Dep.prototype.notify = function() {
  this.deps.forEach(watcher => {
    watcher.update()
  })
}
// Vue中會(huì)有嵌套的邏輯，比如組件嵌套，所以利用棧來(lái)記錄嵌套的watcher 
// 棧，先入后出 
const targetStack = [] 
function pushTarget(_target) { 
  if (Dep.target) targetStack.push(Dep.target) 
  Dep.target = _target 
} 
function popTarget() { 
  Dep.target = targetStack.pop() 
}

class Watcher {
  constructor(expOrFn) {
    // 這里傳入?yún)?shù)不是函數(shù)時(shí)需要解析，parsePath略
    this.getter = typeof expOrFn === 'function' ? expOrFn : parsePath(expOrFn)
    this.get()
  }
  // class中定義函數(shù)不需要寫function
  get() {
    // 執(zhí)行到這時(shí)，this是當(dāng)前的watcher實(shí)例，也是Dep.target
    pushTarget(this)
    this.value = this.getter()
    popTarget()
  }
  update() {
    this.get()
  }
}

<template>
  <div id="app" class="container">
    <h1>HELLO WORLD！</h1>
  </div>
</template>

// 對(duì)應(yīng)的vnode 
{ 
  tag: 'div', 
  props: { id: 'app', class: 'container' }, 
  children: { tag: 'h1', children: 'HELLO WORLD！' } 
}

function VNode(tag, data, childern, text, elm) { 
  this.tag = tag 
  this.data = data 
  this.childern = childern 
  this.text = text 
  this.elm = elm // 對(duì)真實(shí)節(jié)點(diǎn)的引用 
}

function sameVNode()
function sameVnode(a, b) { 
  return a.key === b.key && 
  ( a.tag === b.tag && 
    a.isComment === b.isComment && 
    isDef(a.data) === isDef(b.data) && 
    sameInputType(a, b) 
  ) 
 }

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm
  // 以上是新舊Vnode的首尾指針、新舊Vnode的首尾節(jié)點(diǎn)

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 如果不滿足這個(gè)while條件，表示新舊Vnode至少有一個(gè)已經(jīng)遍歷了一遍了，就退出循環(huán)
    if (isUndef(oldStartVnode)) {
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      // 比較舊的開頭和新的開頭是否是相同節(jié)點(diǎn)
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 比較舊的結(jié)尾和新的結(jié)尾是否是相同節(jié)點(diǎn)
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      // 比較舊的開頭和新的結(jié)尾是否是相同節(jié)點(diǎn)
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      // 比較舊的結(jié)尾和新的開頭是否是相同節(jié)點(diǎn)
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      // 設(shè)置key和不設(shè)置key的區(qū)別：
      // 不設(shè)key，newCh和oldCh只會(huì)進(jìn)行頭尾兩端的相互比較，設(shè)key后，除了頭尾兩端的比較外，還會(huì)從用key生成的對(duì)象oldKeyToIdx中查找匹配的節(jié)點(diǎn)，所以為節(jié)點(diǎn)設(shè)置key可以更高效的利用dom。
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      // 抽取出oldVnode序列的帶有key的節(jié)點(diǎn)放在map中，然后再遍歷新的vnode序列
      // 判斷該vnode的key是否在map中，若在則找到該key對(duì)應(yīng)的oldVnode,如果此oldVnode與遍歷到的vnode是sameVnode的話，則復(fù)用dom并移動(dòng)dom節(jié)點(diǎn)位置
      if (isUndef(idxInOld)) { // New element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // same key but different element. treat as new element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
  if (oldStartIdx > oldEndIdx) {
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) {
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  }
}

for (macroTask of macroTaskQueue) { 
  // 1. Handle current MACRO-TASK 
  handleMacroTask()
  // 2. Handle all MICRO-TASK 
  for (microTask of microTaskQueue) { 
    handleMicroTask(microTask)
  } 
}

getData(res).then(() => { 
  this.xxx = res.data 
  this.$nextTick(() => { // 這里我們可以獲取變化后的 DOM }) 
})