Vue源码解析第11篇：render辅助函数有何奥秘？

本文共计7859个文字，预计阅读时间需要32分钟。

在Vue编译器基础上，深入理解组件是如何通过运行时工具（如render helper）生成VNode的。本文将探讨Vue源码解读（10）——编译器之生成渲染函数。

在 Vue 编译器的基础上，进一步深入理解一个组件是如何通过这些运行时的工具方法（render helper）生成 VNode 的 前言

上一篇文章 Vue 源码解读（10）—— 编译器 之 生成渲染函数 最后讲到组件更新时，需要先执行编译器生成的渲染函数得到组件的 vnode。

渲染函数之所以能生成 vnode 是通过其中的 _c、_l、、_v、_s 等方法实现的。比如：

• 普通的节点被编译成了可执行 _c 函数

• v-for 节点被编译成了可执行的 _l 函数

• ...

但是到目前为止我们都不清楚这些方法的原理，它们是如何生成 vnode 的？只知道它们是 Vue 实例方法，今天我们就从源码中找答案。

目标

在 Vue 编译器的基础上，进一步深入理解一个组件是如何通过这些运行时的工具方法（render helper）生成 VNode 的

源码解读 入口

我们知道这些方法是 Vue 实例方法，按照之前对源码的了解，实例方法一般都放在 /src/core/instance 目录下。其实之前在 Vue 源码解读（6）—— 实例方法 阅读中见到过 render helper，在文章的最后。