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 方法, 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"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 = trueMutationObserver是一个构造器，接受一个callback参数，用来处理节点变化的回调函数，observe方法中options参数characterData：设置true，表示观察目标数据的改变
_render函数
通过执行 createElement 方法并返回的是 vnode，它是一个虚拟的 Node。
vnode = render.call(vm._renderProxy, vm.$createElement)总结
以上所述是小编给大家介绍的vue 源码解析之虚拟Dom-render，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！