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

2020-06-14 06:07:13易采站长站整理

cloned.fnContext = vnode.fnContext
cloned.fnOptions = vnode.fnOptions
cloned.fnScopeId = vnode.fnScopeId
cloned.asyncMeta = vnode.asyncMeta
cloned.isCloned = true
return cloned
}

VNode 类实现的源代码分两部分,第一部分是定义 VNode 类自身的实现,第二部分是定一些常用的节点创建方法,包括创建空的虚拟节点,文字虚拟节点和新拷贝节点。虚拟节点本身是一个包含了所有渲染所需信息的载体,从前面一部分的属性就可以看出,不仅有相应的 DOM 标签和属性信息,还包含了子虚拟节点列表,所以一个组件初始化之后得到的 VNode 也是一棵虚拟节点树,实质是抽象和信息化了的对应于 DOM 树的 JS 对象。

VNode 的使用在服务器渲染中也有应用,关于这一部分暂时放到之后去研究。

认识到 VNode 的实质之后,对于它的基础性的作用还是不太清楚,为什么需要创建这种对象来呢?答案就在Vue的响应式刷新里。如前所述,观察系统实现了对数据变更的监视,在收到变更的通知之后处理权就移交到渲染系统手上,渲染系统首先进行的处理就是根据变动生成新虚拟节点树,然后再去对比旧的虚拟节点树,来实现这个抽象对象的更新,简单的来说就是通过新旧两个节点树的对照,来最终确定一个真实DOM建立起来所需要依赖的抽象对象,只要这个真实 DOM 所依赖的对象确定好,渲染函数会把它转化成真实的 DOM 树。

最后来概括地描述一下 VNode 渲染成真实 DOM 的路径:

渲染路径

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节点和新生成的虚拟节点。