【Vue】理解Vue源码系列（一）

深入理解Vue源码，才是真正的使用Vue。我们可能用Vue开发了很多项目，但并不知道Vue框架中的原理，这样我们只会是一个Api调用师。理解一些框架的源码，帮助我们去设计、开发出更高质量的代码，这是一个真正工程师的必要技能。接下来，我们开启Vue源码探究之旅。

本次Vue源码系列的Vue版本为2.6.10，所有的讨论都是围绕着这个版本的Vue展开的。

我们先来看Vue源码目录，Vue源码都在src目录下。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

Compiler

这个目录是有关Vue编译相关的代码，主要是将模板转化成render函数。编译的工作可以通过webpack等工具取代，也可以直接在运行时编译，但会带来性能的损耗。因此我们推荐离线编译。

Core

Vue源码中的核心部分，生命周期、渲染过程、双向绑定等等都在这里，是我们要探究的核心

Platforms

Vue是跨平台框架，他可以运行在web平台和weex平台上，提供了在不同平台上运行的入口。

Server

用于服务端渲染

Sfc

这个目录下的代码逻辑会把 .vue单文件内容解析成一个 JavaScript 的对象。

Shared

Vue共享的工具函数和方法

找到入口

我们来看基于web平台的入口文件，目录在vue/src/platforms/web下，Vue为我们提供了不同的编译方式，一种是Runtime版本，一种是Runtime + Compiler版本。

Runtime

这个版本只提供Vue运行时的代码，比Runtime + Comiler版本更加轻量。但我们需要借助webpack工具的vue-loader将.vue文件转化成js。

Runtime + Comilper

这个版本提供了运行时代码和运行时编译功能，编译功能将对模板(template)转化成render函数。但会带来运行时性能的损耗和文件体积变大。因此，我们推荐使用Runtime版本，并通过webpack来做预编译。