Vue源码学习之响应式是如何实现的

目录

• 前言
• 一、一个响应式系统的关键要素

• 1、如何监听数据变化
• 2、如何进行依赖收集——实现 Dep 类
• 3、数据变化时如何更新——实现 Watcher 类

• 1、虚拟 DOM 是什么？
• 2、diff 算法——新旧节点对比

Object.defineProperty(obj, prop, descriptor)
// obj是传入的对象，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() // 用来收集依赖
  Object.defineProperty(obj, prop, {
    get() {
      // 访问对象属性了，说明依赖当前对象属性，把依赖收集起来
      dep.depend()
      return val
    }
    set(newVal) {
      if (newVal === val) return
      // 数据被修改了，该通知相关人员更新相应的视图了
      val = newVal
      dep.notify()     
    }
  }) 
  // 深层监听
  if (isObject(val)) {
    observe(val)
  }
  return obj
}

function Dep() {
  // 用deps数组来存储各项依赖
  this.deps = []
}
// Dep.target用来记录正在运行的watcher实例，这是一个全局唯一的 Watcher 
// 这是一个非常巧妙的设计，因为JS是单线程的，在同一时间只能有一个全局的 Watcher 被计算
Dep.target = null
// 在原型上定义depend方法，每个实例都能访问
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中会有嵌套的逻辑，比如组件嵌套，所以利用栈来记录嵌套的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) {
    // 这里传入参数不是函数时需要解析，parsePath略
    this.getter = typeof expOrFn === 'function' ? expOrFn : parsePath(expOrFn)
    this.get()
  }
  // class中定义函数不需要写function
  get() {
    // 执行到这时，this是当前的watcher实例，也是Dep.target
    pushTarget(this)
    this.value = this.getter()
    popTarget()
  }
  update() {
    this.get()
  }
}

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

// 对应的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 // 对真实节点的引用 
}

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的首尾节点
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 如果不满足这个while条件，表示新旧Vnode至少有一个已经遍历了一遍了，就退出循环
    if (isUndef(oldStartVnode)) {
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      // 比较旧的开头和新的开头是否是相同节点
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 比较旧的结尾和新的结尾是否是相同节点
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      // 比较旧的开头和新的结尾是否是相同节点
      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
      // 比较旧的结尾和新的开头是否是相同节点
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      // 设置key和不设置key的区别：
      // 不设key，newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom。
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      // 抽取出oldVnode序列的带有key的节点放在map中，然后再遍历新的vnode序列
      // 判断该vnode的key是否在map中，若在则找到该key对应的oldVnode,如果此oldVnode与遍历到的vnode是sameVnode的话，则复用dom并移动dom节点位置
      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 }) 
})