Vue源码中实例挂载与编译流程实现思路是如何详细解析的？

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

在中文文档开头之前，先了解Vue基于源码构建的两个版本，一个是+runtime+ only+，另一个是+runtime+加compiler+的版本。这两个版本的主要区别在于后者包含了编译器。编译器的作用是将模板编译成虚拟DOM，这是Vue实现响应式和组件化的关键。简单来说，编译器是Vue将模板转换为可执行代码的核心工具。

在正文开始之前，先了解vue基于源码构建的两个版本，一个是 runtime only ，另一个是 runtime加compiler 的版本，两个版本的主要区别在于后者的源码包括了一个编译器。

什么是编译器，百度百科上面的解释是

简单讲，编译器就是将“一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。一个现代编译器的主要工作流程：源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 目标代码 (object code) → 链接器 (Linker) → 可执行程序 (executables)。

通俗点讲，编译器是一个提供了将源代码转化为目标代码的工具。更进一步理解，vue内置的编译器实现了将 .vue 文件转换编译为可执行javascript脚本的功能。

3.1.1 Runtime + Compiler

一个完整的vue版本是包含编译器的，我们可以使用 template 进行模板编写。编译器会自动将模板编译成 render 函数。