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