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,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com