深入理解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来做预编译。