vue 源码解析之虚拟Dom-render

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
installRenderHelpers( 将一些渲染的工具函数放在Vue 原型上)

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

export function nextTick (cb"htmlcode">

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 用来触发执行回调函数
先判断是否原生支持promise，如果支持，则利用promise来触发执行回调函数；

否则，如果支持MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行 

所有回调函数。


如果都不支持，则利用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)



总结
以上所述是小编给大家介绍的vue 源码解析之虚拟Dom-render，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！