vue-源码解析-虚拟Domrender

instance/index.js

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}
renderMixin(Vue)

初始化先执行了 renderMixin 方法, Vue 实例化执行 this._init, 执行 this.init 方法中有 initRender()

renderMixin

installRenderHelpers(将一些渲染的工具函数放在 Vue 原型上)

Vue.prototype.$nextTick = function (fn: Function) {return nextTick(fn, this)
  }

仔细看这个函数，在 Vue 中的官方文档上这样解释

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {if (cb) {
      try {cb.call(ctx)
      } catch (e) {handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {_resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()}
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {_resolve = resolve})
  }
}

Vue.nextTick 用于延迟执行一段代码，它接受 2 个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回 promise 对象。

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {copies[i]()}
}

这个 flushCallbacks 是执行 callbacks 里存储的所有回调函数。
timerFunc 用来触发执行回调函数

1. 先判断是否原生支持 promise，如果支持，则利用 promise 来触发执行回调函数；
2. 否则，如果支持 MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行
   所有回调函数。
3. 如果都不支持，则利用 setTimeout 设置延时为 0。

  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {characterData: true})
  timerFunc = () => {counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true

MutationObserver 是一个构造器，接受一个 callback 参数，用来处理节点变化的回调函数，observe 方法中 options 参数 characterData：设置 true，表示观察目标数据的改变

_render 函数

通过执行 createElement 方法并返回的是 vnode，它是一个虚拟的 Node。

vnode = render.call(vm._renderProxy, vm.$createElement)