返回

初次渲染原理：Vue 2.0 手写源码解读（二）

前端

在上篇博文中，我们深入探讨了 Vue 的响应式原理，让我们对 Vue 的核心机制有了初步了解。而初次渲染则是 Vue 初始化过程中的另一个关键步骤，它将数据模型转化为可视化的 DOM 元素。本文将带你踏上一次代码之旅，从源代码的角度解析 Vue 2.0 中的初次渲染流程。

渲染过程概述

Vue 2.0 的初次渲染过程主要分为三个阶段：

  1. 模板编译： 将模板字符串编译成渲染函数。
  2. VNode 创建： 根据渲染函数创建虚拟 DOM (VNode)。
  3. VNode 渲染： 将 VNode 转换成真实的 DOM 元素，并插入到页面中。

模板编译

模板编译是将模板字符串转换成渲染函数的过程。渲染函数是一个纯 JavaScript 函数，它接受数据模型作为参数，并返回一个表示 DOM 结构的 VNode。编译过程主要由 compileToFunctions 函数完成。

function compileToFunctions(template: string): CompiledResult {
  // ...
  const res = compile(template);
  if (!res) {
    return;
  }
  const [code, render] = res;
  return {
    render: new Function(code),
  };
}

VNode 创建

VNode 是 Vue 2.0 中用来表示 DOM 结构的虚拟节点。它包含了 DOM 元素的类型、属性、事件处理程序和子节点等信息。创建 VNode 的过程由 createVNode 函数完成。

export function createVNode(
  type: string | VNodeConstructor | void,
  fn: Function | null,
  children: VNodeChildrenArray | undefined,
  tag?: string,
  data?: VNodeData | null,
  context?: Vue | null,
  key?: string | number | null
): VNode | null;

VNode 渲染

VNode 渲染是将 VNode 转换成真实的 DOM 元素的过程。它由 patch 函数完成。patch 函数采用 diff 算法，比较新旧 VNode，只更新有变化的 DOM 节点，从而提高渲染效率。

export function patch(oldVnode: VNode | Element | null, vnode: VNode, hydrating?: boolean): Element | undefined;

总结

初次渲染是 Vue 2.0 中数据模型转化为可视化 DOM 元素的关键步骤。它包含了模板编译、VNode 创建和 VNode 渲染三个阶段。通过手写源码的解析，我们深入理解了 Vue 的核心机制，为进一步掌握 Vue 的开发和调试打下了坚实的基础。