Vue源码二次解析【理论】5------Vue初始化全过程-------VDOM

最新推荐文章于 2024-03-19 19:22:19 发布

原创最新推荐文章于 2024-03-19 19:22:19 发布 · 291 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#源码分析 #Vue #理论

前端同时被 2 个专栏收录

49 篇文章

订阅专栏

Vue.js

44 篇文章

订阅专栏

本文聚焦Vue中VNode，它是对真实DOM的抽象，形成VNode Tree描述DOM Tree。介绍了VNode由特定函数创建，根据不同参数类型判断规范方法处理children，创建不同类型VNode实例，最后通过patch方法将VNode渲染成真实DOM，还给出相关js源文件的github地址。

VNode【虚拟DOM】是Vue中一个很重要的方面；在Vue中，VNode是对真实DOM的一种抽象【VNode 用来映射到真实 DOM 的渲染】。每个 VNode 都有 children，children 每个元素也是一个 VNode，这样就形成了一个 VNode Tree，它很好的描述了我们的 DOM Tree。

VNode由 createElement 函数创建，创建一个DOM过程：

从源代码中可以看出createElement 方法实际上是对 _createElement 方法的封装，真正创建 VNode 的函数是_createElement。_createElement 方法有 5 个参数，首先根据传入参数的normalizationType 【 render 函数是编译生成的还是用户手写的】的不同类型判断不同的规范方法去规范化children。主要调用 normalizeChildren(children) 和 simpleNormalizeChildren(children) 方法，当render 函数是编译生成的，调用simpleNormalizeChildren 方法；当render 函数是用户手写的，会调用normalizeChildren 方法；当编译 slot、v-for 的时候会产生嵌套数组的情况，会调用 normalizeArrayChildren 方法。其次会创建一个 VNode 的实例，过程为先对 tag 做判断，如果是 string 类型，则接着判断如果是内置的一些节点，则直接创建一个普通 VNode，如果是为已注册的组件名，则通过 createComponent 创建一个组件类型的 VNode，否则创建一个未知的标签的 VNode。如果是 tag 一个 Component 类型，则直接调用 createComponent 创建一个组件类型的 VNode 节点。最后VNode通过_update 方法将VNode渲染成真实的DOM，_update方法 的核心就是调用 vm.__patch__ 方法，vm.__patch__ 方法的定义跟平台和是否在服务端渲染有关，例如在浏览器端渲染中，vm.__patch__ 方法调用createPatchFunction 方法的返回值；而createPatchFunction 内部定义了一系列的辅助方法，最终返回了一个 patch 方法，这个方法就赋值给了 vm._update 函数里调用的 vm.__patch__。patch方法