Vue源码探究之虚拟节点的实现

(编辑：jimmy 日期: 2024/11/18 浏览：2)

页面初始化的所有状态都准备就绪之后，下一步就是要生成组件相应的虚拟节点—— VNode 。初次进行组件初始化的时候， VNode 也会执行一次初始化并存储这时创建好的虚拟节点对象。在随后的生命周期中，组件内的数据发生变动时，会先生成新的 VNode 对象，然后再根据与之前存储的旧虚拟节点的对比来执行刷新页面 DOM 的操作。页面刷新的流程大致上可以这样简单的总结，但是其实现路程是非常复杂的，为了深入地了解虚拟节点生成和更新的过程，首先来看看 VNode 类的具体实现。

VNode 类

VNode 类的实现是支持页面渲染的基础，这个类的实现并不复杂，但无论是创建Vue组件实例还是使用动态JS扩展函数组件都运用到了渲染函数 render ，它充分利用了 VNode 来构建虚拟DOM树。

// 定义并导出VNode类
export default class VNode {
 // 定义实例属性
 tag: string | void; // 标签名称
 data: VNodeData | void; // 节点数据
 children: "color: #ff0000">渲染路径




Vue 的一般渲染有两条路径：


    
  
  • 组件实例初始创建生成DOM
    • 
  
  • 组件数据更新刷新DOM
    • 



在研究生命周期的时候知道，有 mount 和 update 两个钩子函数，这两个生命周期的过程分别代表了两条渲染路径的执行。


组件实例初始创建生成DOM




Vue 组件实例初始创建时，走的是 mount 这条路径，在这条路径上初始没有已暂存的旧虚拟节点，要经历第一轮 VNode 的生成。这一段代码的执行是从 $mount 函数开始的：


$mount => mountComponent => updateComponent => _render => _update => createPatchFunction(patch) => createElm => insert => removeVnodes


大致描述一下每一个流程中所进行的关于节点的处理：


    
  
  • mountComponent 接收了挂载的真实DOM节点，然后赋值给 vm.$el
    • 
  
  • updateComponent 调用 _update ，并传入 _render 生成的新节点
    • 
  
  • _render 生成新虚拟节点树，它内部是调用实例的 createElement 方法创建虚拟节点
    • 
  
  • _update 方法接收到新的虚拟节点后，会根据是否已有存储的旧虚拟节点来分离执行路径，就这一个路径来说，初始储存的 VNode 是不存在的，接下来执行 patch 操作会传入挂载的真实DOM节点和新生成的虚拟节点。
    • 
  
  • createPatchFunction 即是 patch 方法调用的实际函数，执行时会将传入的真实DOM节点转换成虚拟节点，然后执行 createElm
    • 
  
  • createElm 会根据新的虚拟节点生成真实DOM节点，内部同样调用 createElement 方法来创建节点。
    • 
  
  • insert 方法将生成的真实DOM插入到DOM树中
    • 
  
  • removeVnodes 最后将之前转换的真实DOM节点从DOM树中移除
    • 



以上就是一般初始化Vue实例组件时渲染的路径，在这个过程中，初始 VNode 虽然不存在，但是由于挂在的真实 DOM 节点一定存在，所以代码会按照这样的流程来执行。


组件数据更新刷新DOM




一般情况下，数据变成会通知 Watcher 实例调用 update 方法，这个方法在一般情况下会把待渲染的数据观察对象加入到事件任务队列中，避免开销过高在一次处理中集中执行。所以在 mount 路径已经完成了之后，生命周期运行期间都是走的 update 路径，在每一次的事件处理中 nextTick 会调用 flushSchedulerQueue 来开始一轮页面刷新：


flushSchedulerQueue => watcher.run => watcher.getAndInvoke => watcher.get => updateComponent => _render => _update => createPatchFunction(patch) => patchVnode => updateChildren


在这个流程中各个方法的大致处理如下：


    
  
  1. flushSchedulerQueue 调用每一个变更了的数据的监视器的 run 方法
    2. 
  
  2. run 执行调用实例的 getAndInvoke 方法，目的是获取新数据并调用监视器的回调函数
    3. 
  
  3. getAndInvoke 执行的第一步是要获取变更后的新数据，在这时会调用取值器函数
    4. 
  
  4. get 执行的取值器函数getter被设定为 updateComponent ，所以会执行继续执行它
    5. 
  
  5. updateComponent => createPatchFunction 之间的流程与另一条路径相同，只是其中基于新旧虚拟节点的判断不一样，如果存在旧虚拟节点就执行 patchVnode 操作。
    6. 
  
  6. patchVnode 方法是实际更新节点的实现，在这个函数的执行中，会得到最终的真实DOM
    7. 



生命周期中的渲染主要是以上两条路径，调用的入口不同，但中间有一部分逻辑是公用的，再根据判断来选择分离的路程来更新 VNode 和刷新节点。在这个过程可以看出 VNode 的重要作用。


虽然路径大致可以这样总结，但其中的实现比较复杂。不仅在流程判断上非常有跳跃性，实现更新真实节点树的操作也都是复杂递归的调用。


总的来说虚拟节点的实现是非常平易近人，但是在节点渲染的过程中却被运用的十分复杂，段位不够高看了很多遍测试了很多遍才弄清楚整个执行流，这之外还有关于服务器端渲染和持久活跃组件的部分暂时都忽略了。不过关于节点渲染这一部分的实现逻辑非常值得去好好研究。




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：详解JavaScript的内存空间、赋值和深浅拷贝
下一篇：ES6知识点整理之数组解构和字符串解构的应用示例