vue DOM中定义的const elm = vnode.elm = oldnode.elm看不懂,求解
发布网友
发布时间:2022-03-25 09:18
我来回答
共1个回答
热心网友
时间:2022-03-25 10:47
Vue版本: 2.3.2
virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现,virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom,而vdom上定义了关于真实dom的一些关键的信息,vdom完全是用js去实现,和宿主浏览器没有任何联系,此外得益于js的执行速度,将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复杂的dom操作全部放到vdom中进行,这样就通过操作vdom来提高直接操作的dom的效率和性能。
Vue在2.0版本也引入了vdom。其vdom算法是基于snabbdom算法所做的修改。
在Vue的整个应用生命周期当中,每次需要更新视图的时候便会使用vdom。那么在Vue当中,vdom是如何和Vue这个框架融合在一起工作的呢?以及大家常常提到的vdom的diff算法又是怎样的呢?接下来就通过这篇文章简单的向大家介绍下Vue当中的vdom是如何去工作的。
首先,我们还是来看下Vue生命周期当中初始化的最后阶段:将vm实例挂载到dom上,源码在src/core/instance/init.js
Vue.prototype._init = function () { ...
vm.$mount(vm.$options.el)
...
}
实际上是调用了src/core/instance/lifecycle.js中的mountComponent方法,
mountComponent函数的定义是:
export function mountComponent ( vm: Component, el: ?Element,
hydrating?: boolean
): Component { // vm.$el为真实的node
vm.$el = el // 如果vm上没有挂载render函数
if (!vm.$options.render) { // 空节点
vm.$options.render = createEmptyVNode
} // 钩子函数
callHook(vm, 'beforeMount') let updateComponent /* istanbul ignore if */
if (process.env.NODE_ENV !== 'proction' && config.performance && mark) { ...
} else { // updateComponent为监听函数, new Watcher(vm, updateComponent, noop)
updateComponent = () => { // Vue.prototype._render 渲染函数
// vm._render() 返回一个VNode
// 更新dom
// vm._render()调用render函数,会返回一个VNode,在生成VNode的过程中,会动态计算getter,同时推入到dep里面
vm._update(vm._render(), hydrating)
}
} // 新建一个_watcher对象
// vm实例上挂载的_watcher主要是为了更新DOM
// vm/expression/cb
vm._watcher = new Watcher(vm, updateComponent, noop)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) { vm._isMounted = true
callHook(vm, 'mounted')
} return vm
}
注意上面的代码中定义了一个updateComponent函数,这个函数执行的时候内部会调用vm._update(vm._render(), hyddrating)方法,其中vm._render方法会返回一个新的vnode,(关于vm_render是如何生成vnode的建议大家看看vue的关于compile阶段的代码),然后传入vm._update方法后,就用这个新的vnode和老的vnode进行diff,最后完成dom的更新工作。那么updateComponent都是在什么时候去进行调用呢?
vm._watcher = new Watcher(vm, updateComponent, noop)