前端|vue数据渲染前端|vue.js

前言 vue 是如何将编译器中的代码转换为页面真实元素的？这个过程涉及到模板编译成 AST 语法树，AST 语法树构建渲染函数，渲染函数生成虚拟 dom，虚拟 dom 编译成真实 dom 这四个过程。前两个过程在我们 vue 源码解读系列文章的上一期已经介绍过了，所以本文会接着上一篇文章继续往下解读，着重分析后两个过程。
整体流程解读代码之前，先看一张 vue 编译和渲染的整体流程图:

文章图片

vue 会把用户写的代码中的标签中的代码解析成 AST 语法树，再将处理后的 AST 生成相应的render函数，render 函数执行后会得到与模板代码对应的虚拟 dom，最后通过虚拟 dom 中新旧 vnode 节点的对比和更新，渲染得到最终的真实 dom。有了这个整体的概念我们再来结合源码分析具体的数据渲染过程。
从vm.$mount开始 vue 中是通过 $mount 实例方法去挂载 vm 的,数据渲染的过程就发生在 vm.$mount 阶段。在这个方法中，最终会调用 mountComponent 方法来完成数据的渲染。我们结合源码看一下其中的几行关键代码：

updateComponent = () => { vm._update(vm._render(), hydrating) // 生成虚拟dom，并更新真实dom }

这是在 mountComponent 方法的内部，会定义一个 updateComponent 方法，在这个方法中 vue 会通过 vm._render() 函数生成虚拟 dom，并将生成的 vnode 作为第一个参数传入 vm._update() 函数中进而完成虚拟 dom 到真实 dom 的渲染。第二个参数 hydrating 是跟服务端渲染相关的，在浏览器中不需要关心。这个函数最后会作为参数传入到 vue 的 watch 实例中作为 getter 函数，用于在数据更新时触发依赖收集，完成数据响应式的实现。这个过程不在本文的介绍范围内，在这里只要明白，当后续 vue 中的 data 数据变化时，都会触发 updateComponent 方法，完成页面数据的渲染更新。具体的关键代码如下：

new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted && !vm._isDestroyed) { // 触发beforeUpdate钩子 callHook(vm, 'beforeUpdate') } } }, true /* isRenderWatcher */) 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 // 触发mounted钩子 callHook(vm, 'mounted') } return vm }

代码中还有一点需要注意的是，在代码结束处，会做一个判断，当 vm 挂载成功后，会调用 vue 的 mounted 生命周期钩子函数。这也就是为什么我们在 mounted 钩子中执行代码时，vm 已经挂载完成的原因。
vm._render() 接下来具体分析 vue 生成虚拟 dom 的过程。前面说了这一过程是调用vm._render()方法来完成的，该方法的核心逻辑是调用vm.$createElement方法生成vnode，代码如下：

vnode = render.call(vm._renderProxy, vm.$createElement)

其中vm.renderProxy是个代理，代理vm，做一些错误处理，vm.$createElement 是创建vnode的真正方法，该方法的定义如下：

vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

可见最终调用的是createElement方法来实现生成vnode的逻辑。在进一步介绍createElement方法之前，我们先理清楚两个个关键点，1.render的函数来源，2.vnode到底是什么
render方法的来源在 vue 内部其实定义了两种 render 方法的来源，一种是如果用户手写了 render 方法，那么 vue 会调用这个用户自己写的 render 方法，即下面代码中的 vm.$createElement；另外一种是用户没有手写 render 方法，那么vue内部会把 template 编译成 render 方法，即下面代码中的 vm._c。不过这两个 render 方法最终都会调用createElement方法来生成虚拟dom

// bind the createElement fn to this instance // so that we get proper render context inside it. // args order: tag, data, children, normalizationType, alwaysNormalize // internal version is used by render functions compiled from templates vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // normalization is always applied for the public version, used in // user-written render functions. vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

vnode类 vnode 就是用一个原生的 js 对象去描述 dom 节点的类。因为浏览器操作dom的成本是很高的，所以利用 vnode 生成虚拟 dom 比创建一个真实 dom 的代价要小很多。vnode 类的定义如下：

export default class VNode { tag: string | void; // 当前节点的标签名 data: VNodeData | void; // 当前节点对应的对象 children: ?Array; // 当前节点的子节点 text: string | void; // 当前节点的文本 elm: Node | void; // 当前虚拟节点对应的真实dom节点 ..../*创建一个空VNode节点*/ export const createEmptyVNode = (text: string = '') => { const node = new VNode() node.text = text node.isComment = true return node } /*创建一个文本节点*/ export function createTextVNode (val: string | number) { return new VNode(undefined, undefined, undefined, String(val)) } ....

可以看到 vnode 类中仿照真实 dom 定义了很多节点属性和一系列生成各类节点的方法。通过对这些属性和方法的操作来达到模仿真实 dom 变化的目的。
createElement
有了前面两点的知识储备，接下来回到 createElement 生成虚拟 dom 的分析。createElement 方法中的代码很多，这里只介绍跟生成虚拟 dom 相关的代码。该方法总体来说就是创建并返回一个 vnode 节点。在这个过程中可以拆分成三件事情：1.子节点的规范化处理； 2.根据不同的情形创建不同的 vnode 节点类型；3.vnode 创建后的处理。下面开始分析这3个步骤：
子节点的规范化处理

if (normalizationType === ALWAYS_NORMALIZE) { children = normalizeChildren(children) } else if (normalizationType === SIMPLE_NORMALIZE) { children = simpleNormalizeChildren(children) }

为什么会有这个过程，是因为传入的参数中的子节点是 any 类型，而 vue 最终生成的虚拟 dom 实际上是一个树状结构，每一个 vnode 可能会有若干个子节点，这些子节点应该也是 vnode 类型。所以需要对子节点处理，将子节点统一处理成一个 vnode 类型的数组。同时还需要根据 render 函数的来源不同，对子节点的数据结构进行相应处理。
创建vnode节点这部分逻辑是对tag标签在不同情况下的处理，梳理一下具体的判断case如下：

如果传入的 tag 标签是字符串，则进一步进入下列第 2 点和第 3 点判断，如果不是字符串则创建一个组件类型 vnode 节点。
如果是内置的标签，则创建一个相应的内置标签 vnode 节点。
如果是一个组件标签，则创建一个组件类型 vnode 节点。
其他情况下，则创建一个命名空间未定义的 vnode 节点。

let vnode, ns if (typeof tag === 'string') { let Ctor // 获取tag的名字空间 ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)// 判断是否是内置的标签，如果是内置的标签则创建一个相应节点 if (config.isReservedTag(tag)) { // platform built-in elements if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) { warn( `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`, context ) } vnode = new VNode( config.parsePlatformTagName(tag), data, children, undefined, undefined, context ) // 如果是组件，则创建一个组件类型节点 // 从vm实例的option的components中寻找该tag，存在则就是一个组件，创建相应节点，Ctor为组件的构造类 } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) { // component vnode = createComponent(Ctor, data, context, children, tag) } else { // unknown or unlisted namespaced elements // check at runtime because it may get assigned a namespace when its // parent normalizes children//其他情况，在运行时检查，因为父组件可能在序列化子组件的时候分配一个名字空间 vnode = new VNode( tag, data, children, undefined, undefined, context ) } } else { // direct component options / constructor // tag不是字符串的时候则是组件的构造类，创建一个组件节点 vnode = createComponent(tag, data, context, children) }

vnode创建后的处理这部分同样也是一些 if/else 分情况的处理逻辑：

如果 vnode 成功创建，且是一个数组类型，则返回创建好的 vnode 节点
如果 vnode 成功创建，且有命名空间，则递归所有子节点应用该命名空间
如果 vnode 没有成功创建则创建并返回一个空的 vnode 节点

if (Array.isArray(vnode)) { // 如果vnode成功创建，且是一个数组类型，则返回创建好的vnode节点 return vnode } else if (isDef(vnode)) { // 如果vnode成功创建，且名字空间，则递归所有子节点应用该名字空间 if (isDef(ns)) applyNS(vnode, ns) if (isDef(data)) registerDeepBindings(data) return vnode } else { // 如果vnode没有成功创建则创建空节点 return createEmptyVNode() }

vm._update() vm._update() 做的事情就是把 vm._render() 生成的虚拟 dom 渲染成真实 dom。_update() 方法内部会调用 vm.__patch__ 方法来完成视图更新，最终调用的是 createPatchFunction 方法，该方法的代码量和逻辑都非常多，它定义在 src/core/vdom/patch.js 文件中。下面介绍下具体的 patch 流程和流程中用到的重点方法：
重点方法

createElm：该方法会根据传入的虚拟 dom 节点创建真实的 dom 并插入到它的父节点中
sameVnode：判断新旧节点是否是同一节点。
patchVnode：当新旧节点是相同节点时，调用该方法直接修改节点，在这个过程中，会利用 diff 算法，循环进行子节点的的比较,进而进行相应的节点复用或者替换。
updateChildren方法：diff 算法的具体实现过程

patch流程第一步：判断旧节点是否存在，如果不存在就调用 createElm() 创建一个新的 dom 节点，否则进入第二步判断。

if (isUndef(oldVnode)) { // empty mount (likely as component), create new root element isInitialPatch = true createElm(vnode, insertedVnodeQueue) }

第二步：通过 sameVnode() 判断新旧节点是否是同一节点，如果是同一个节点则调用 patchVnode() 直接修改现有的节点，否则进入第三步判断

const isRealElement = isDef(oldVnode.nodeType) if (!isRealElement && sameVnode(oldVnode, vnode)) { // patch existing root node /*是同一个节点的时候直接修改现有的节点*/ patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly) }

第三步：如果新旧节点不是同一节点，则调用 createElm()创建新的dom，并更新父节点的占位符，同时移除旧节点。

else { .... createElm( vnode, insertedVnodeQueue, // extremely rare edge case: do not insert if old element is in a // leaving transition. Only happens when combining transition + // keep-alive + HOCs. (#4590) oldElm._leaveCb ? null : parentElm, nodeOps.nextSibling(oldElm) ) // update parent placeholder node element, recursively /*更新父的占位符节点*/ if (isDef(vnode.parent)) { let ancestor = vnode.parent const patchable = isPatchable(vnode) while (ancestor) { for (let i = 0; i < cbs.destroy.length; ++i) { cbs.destroy[i](ancestor)/*调用destroy回调*/ } ancestor.elm = vnode.elm if (patchable) { for (let i = 0; i < cbs.create.length; ++i) { cbs.create[i](emptyNode, ancestor)/*调用create回调*/ } // #6513 // invoke insert hooks that may have been merged by create hooks. // e.g. for directives that uses the "inserted" hook. const insert = ancestor.data.hook.insert if (insert.merged) { // start at index 1 to avoid re-invoking component mounted hook for (let i = 1; i < insert.fns.length; i++) { insert.fns[i]() } } } else { registerRef(ancestor) } ancestor = ancestor.parent } } // destroy old node if (isDef(parentElm)) { removeVnodes([oldVnode], 0, 0) /* 删除旧节点 */ } else if (isDef(oldVnode.tag)) { invokeDestroyHook(oldVnode) /* 调用destroy钩子 */ } }

第四步：返回 vnode.elm，即最后生成的虚拟 dom 对应的真实 dom，将 vm.$el 赋值为这个 dom 节点，完成挂载。
其中重点的过程在第二步和第三步中，特别是 diff 算法对新旧节点的比较和更新很有意思，diff 算法在另外一篇文章来详细介绍 Vue中的diff算法。
其他注意点 sameVnode的实际应用在patch的过程中，如果两个节点被判断为同一节点，会进行复用。这里的判断标准是
1.key相同
2.tag（当前节点的标签名）相同
3.isComment（是否为注释节点）相同
4.data的属性相同
平时写 vue 时会遇到一个组件中用到了 A 和 B 两个相同的子组件，可以来回切换。有时候会出现改变了 A 组件中的值，切到 B 组件中，发现 B 组件的值也被改变成和 A 组件一样了。这就是因为 vue 在 patch 的过程中，判断出了 A 和 B 是 sameVnode，直接进行复用引起的。根据源码的解读，可以很容易地解决这个问题，就是给 A 和 B 组件分别加上不同的 key 值，避免 A 和 B 被判断为同一组件。
虚拟DOM如何映射到真实的DOM节点 【前端|vue数据渲染】vue 为平台做了一层适配层，浏览器平台的代码在 /platforms/web/runtime/node-ops.js。不同平台之间通过适配层对外提供相同的接口，虚拟 dom 映射转换真实 dom 节点的时候，只需要调用这些适配层的接口即可，不需要关心内部的实现。
最后通过上述的源码和实例的分析，我们完成了 Vue 中数据渲染的完整解读。如果想要了解更多的 Vue 源码。欢迎进入我们的github进行查看，里面有Vue源码分析另外几篇文章，另外对 Vue 工程的每一行源码都做了注释，方便大家的理解。~~~~