Vue2.x源码解析（二）_汪汪队源码-CSDN博客

本文链接：https://blog.csdn.net/qq_58671311/article/details/130700373

Compiler 函数

在Vue 2.0 中，Compiler 函数是 Vue 编译器的核心，它负责将 HTML 模板编译成渲染函数。这个函数被用于创建 Vue 实例或者组件。下面是 Compiler 函数的伪代码实现：

function compile (template) {
  // 把模板转换成 AST（抽象语法树）
  const ast = parse(template)

  // 对 AST 进行静态优化
  optimize(ast)

  // 把 AST 转换成渲染函数
  const code = generate(ast)

  // 把渲染函数打包成可执行的函数
  const render = new Function(code)

  // 返回渲染函数
  return {
    render,
    staticRenderFns: []
  }
}

上面的代码是 Compiler 函数的伪代码实现，它包括以下三个步骤：

把模板转换成 AST（抽象语法树）首先，Compiler 函数会调用 parse 函数，把 HTML 模板转换成 AST。AST 把我们的模板编译成一组抽象的节点树，每个节点表示HTML中的一个元素或者属性，并且包含有关该元素或属性的详细信息。
对 AST 进行静态优化接下来，Compiler 函数会对 AST 进行静态优化，帮助我们减少渲染函数的成本和优化性能。这一步通常包括静态节点提取（Static Node Hoisting）、静态属性提取（Static Property Hoisting）和表达式提取（Expression Hoisting）等。
把 AST 转换成渲染函数最后，Compiler 函数会调用 generate 函数，把 AST 转换成渲染函数的字符串代码。
把渲染函数打包成可执行的函数 render 函数的代码生成后，会被封装成一个新的 Function 对象，赋值给 Vue 实例的 $options 属性。这样，每次调用 render 函数时，就会执行新创建的 Function 对象，并返回渲染结果。

这就是 Compiler 函数的主要作用。它将提供一个包含渲染函数和静态节点数组的对象，然后我们就可以用它来创建 Vue 实例或它的子组

Runtime 函数

Runtime 函数是用于生成虚拟DOM并处理渲染的函数。它通过创建虚拟DOM、执行diff算法以及最终将虚拟DOM转换成实际的DOM，实现了Vue的整个渲染流程。在对Vue模板进行编译并且生成渲染函数后，Runtime 函数实际上是直接调用渲染函数的。

function mount(rootComponent, el) {
  // 创建虚拟DOM
  const vnode = createVNode(rootComponent)

  // 创建渲染上下文
  const context = createRenderContext()

  // 渲染虚拟DOM
  render(vnode, el, context)
}

function render(vnode, container, context) {
  if (isString(vnode) || isNumber(vnode)) {
    // 处理文本节点
    const textNode = createTextNode(vnode)
    insert(container, textNode)
  } else if (isObject(vnode) && vnode._isVNode) {
    // 处理虚拟DOM节点
    const prevVNode = context.prevVNode
    if (sameVnode(vnode, prevVNode)) {
      // 更新节点
      patch(prevVNode, vnode, container, context)
    } else {
      // 渲染新节点
      mountNode(vnode, container, context)
    }
  }
}

function patch(prevVNode, nextVNode, parent, context) {
  // 更新节点内容
  updateAttrs(prevVNode, nextVNode)
  updateClass(prevVNode, nextVNode)
  updateProps(prevVNode, nextVNode)
  updateChildren(prevVNode, nextVNode, parent, context)
}

function mountNode(vnode, container, context) {
  if (isFunction(vnode.type)) {
    // 处理组件节点
    mountComponent(vnode, container, context)
  } else {
    // 处理普通节点
    mountElement(vnode, container, context)
  }
}

function mountElement(vnode, container, context) {
  // 创建DOM节点
  const el = createDomElement(vnode)

  // 挂载子节点
  mountChildren(vnode, el, context)

  // 将DOM节点插入到父节点中
  insert(container, el)

  // 更新渲染上下文，保存当前节点
  context.prevVNode = vnode
}

上面的代码是 Runtime 函数的伪代码实现，它包括以下几个步骤：

创建虚拟DOM 在运行时，首先会创建一个虚拟DOM节点，并确保它符合VNode接口的标准格式。
创建渲染上下文接着创建了一个渲染上下文，它包括一些用于处理渲染的核心函数。这个上下文对象包括了之前我们提到的prevVNode，用于在未来的更新中比较节点差异。
渲染虚拟DOM 接下来，我们开始执行实际的渲染过程。我们检查我们的vnode是否是字符串或数字类型的，如果是就创建文本节点并添加到父节点中，如果不是，我们看vnode是否应该被视为虚拟DOM节点。如果是，我们检查prevVNode是否与nextVNode相同，如果不同，我们会调用mountNode()方法，以根据新的vnode创建新节点。如果它们相同，我们会调用patch()方法更新DOM节点。
更新节点内容与新节点不同的是，在此处由patch()方法做出的更改通常包括更新节点本身的属性和样式。在此处，我们通常检查当前节点的属性和下一个节点的属性是否相等，并相应地设置节点属性。
更新子节点当我们之前更新当前节点的属性时，我们还需要考虑它的子节点。我们会递归地调用patch()方法来确保我们的父级节点的所有子节点都已更新。
创建DOM节点创建Dom节点时，我们通常会根据VNode的信息来确定节点的特定类型和class，并创建相应的HTML节点。
挂载子节点然后我们把虚拟子节点挂载到HTML节点上。
将DOM节点插入到父节点中最后，我们会把DOM节点插入到父节点的HTML树中，并根据节点的类型进行合适的操作。