内蒙古网站建设电话,网站建设 面试,seo网络营销技术,专业的企业网站优化公司diff的时机 当组件创建时#xff0c;以及依赖的属性或数据变化时#xff0c;会运行一个函数#xff0c;该函数会做两件事#xff1a; 运行_render生成一棵新的虚拟dom树(vnode tree)#xff0c;返回根节点运行_update#xff0c;传入虚拟dom树的根节点#xff0c;对新旧… diff的时机 当组件创建时以及依赖的属性或数据变化时会运行一个函数该函数会做两件事 运行_render生成一棵新的虚拟dom树(vnode tree)返回根节点运行_update传入虚拟dom树的根节点对新旧两棵树进行对比最终完成对真实dom的更新 核心代码如下 function Vue() {// ...let updateComponent () {this._update(this._render())}new Watcher(updateComponent)// ...
}diff就发生在_update函数的运行过程中。 _update函数在干什么 _update函数接收到一个vnode参数这就是新生成的虚拟dom树。 同时update函数通过当前组件的_vnode属性拿到旧的虚拟dom树。 _update函数首先会给组件的_vnode属性重新赋值让它指向新树。 function update(vnode) {// vnode 新节点// this._vnode 旧节点let oldVNode this._vnodethis._vnode vnode// 对比新旧节点 更新真实 dom}然后会判断旧树存不存在 不存在说明这是第一次加载组件于是通过内部的patch函数直接遍历新树为每个节点生成真实DOM,挂载到每个节点的elm属性上 if (!oldVNode) {this.__patch__(this.$el, vnode)
}存在说明之前已经渲染过该组件于是通过内部的patch函数对新旧两棵树进行对比以达到下面两个目标 完成对所有真实dom的最小化处理让新树的节点对应合适的真实dom patch 函数的对比流程 术语解释 「相同」是指两个虚拟节点的标签类型、key值均相同但input元素还要看type属性「新建元素」是指根据一个虚拟节点提供的信息创建一个真实dom元素同时挂载到虚拟节点的elm 属性上「销毁元素」是指vnode.elm.remove() 移除真实 dom 元素「更新」是指对两个虚拟节点进行对比更新它仅发生在两个虚拟节点「相同」的情况下「对比子节点」是指对两个虚拟节点的子节点进行对比深度优先遍历 详细流程 根节点比较 patch函数首先对根节点进行比较。 如果两个节点 「相同」进入「更新」流程 将|旧节点的真实dom赋值到新节点newVnode.elmoldVnode.elm对比新节点和旧节点的属性有变化的更新到真实dom中当前两个节点处理完毕开始「对比子节点」 不「相同」 新节点递归「新建元素」旧节点「销毁元素」 「对比子节点」 尽量少的进行操作不行的话尽量仅改动元素属性还不行的话尽量移动元素而不是删除和创建元素还不行的话删除和创建元素
总结
当组件创建和更新时vue均会执行内部的update函数该函数使用render函数生成虚拟dom树将新旧两树进行对比找到差异点最终更新到真实dom。
对比差异的过程叫diffVue在内部通过一个叫patch的函数完成该过程。
在对比时Vue采用深度优先、同层比较的方式进行比对。
在判断两个节点是否相同时vue是通过虚拟节点的key和tag来进行判断的。
具体来说首先对根节点进行对比如果相同则将旧节点关联的真实 dom 的引用挂到新节点上然后根据需 要更新属性到真实 dom然后再对比其子节点数组如果不相同则按照新节点的信息递归创建所有真实 dom,同时挂到对应虚拟节点上然后移除掉旧的dom。
在对比其子节点数组时Vue 对每个子节点数组使用了两个指针分别指向头尾然后不断向中间靠拢来进行 对比这样做的目的是尽量复用真实dom,尽量少的销毁和创建真实dom。如果发现相同则进入和根节点一样的对比流程如果发现不同则移动真实dom到合适的位置。
这样一直递归的遍历下去直到整棵树完成对比。
