vue虚拟Dom-render的源码解析

这篇文章主要介绍"vue虚拟Dom-render的源码解析"，在日常操作中，相信很多人在vue虚拟Dom-render的源码解析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue虚拟Dom-render的源码解析"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

vue 源码解析 --虚拟Dom-render

instance/index.jsfunction 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()

renderMixininstallRenderHelpers( 将一些渲染的工具函数放在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 用来触发执行回调函数

先判断是否原生支持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的源码解析"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！