vue源码之目录

栏目 Vue

准备工作 #

认识flow #

作者也坦诚当初选flow,押错了宝哈哈,现在vue3改成ts了,在这里不做深入理解,还是当个学习的过程,别忘了,flow是Facebook出的。

js的灵活有目共睹,现在向 强类型语言靠拢已获得更好的体验。flow类型检查分两种:

  • 类型推断。根据上下文推断类型,根据推断检查类型
  • 类型注释。提前写好期待的类型注释,flow根据注释进行判断

类型推断 #

自动推断

function split(str){
    return str.split('')
}
split(11)// 这里会报错,自动判断期待的是字符串而不是数字

类型注释 #

function add(x:number,y:number):number{
return x+y
}
add('1'+1) // 这样就能检查出错误
  • 数组 var arr:Array<number>=[1]
  • 对象 var obj:{a:string}:{a:'string'}

vue咋用的vue vue2.x 根目录vue/flow 随便打开一个js

细节不仔细看了,这样就搞定了一个顶级目录

源代码目录 #

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

编译。编译可以交给loader去做,也可以在线执行,使用带编译器的版本。

core核心。

platform 跨平台。分别是web和weex。后面展开web的部分

server

在node中运行的代码,ssr

sfc 单文件,会把 .vue文件解析成一个对象。

shared 定义一些工具方法。被web和服务端的vue共享。

源码构建 #

和构建有关的就三句,这三句展示传的参数不同。

进入 vue/scripts/build.js

去看scripts/config.js 也是。按照 rollup的规则构建,参数分别是:

  • entry 入口 dest 出口
  • format 打包格式,打包成不同的 cjs es umd
  • env 环境变量 dev 和 prod

Runtime only 和 Runtime+Compiler 带不带编译器,渲染完的不需要再编译。

入口开始 #

观察这个src/platforms/web/entry-runtime-with-compiler.js

按图索骥,我们 import的vue,到底是怎么回事:

  • src/platforms/web/entry-runtime-with-compiler.js line7 import Vue from './runtime/index'
  • src/platforms/web/runtime/index.js line3 import Vue from 'core/index'
  • src/core/index.js
    • line1 import Vue from './instance/index'
    • line6 initGlobalAPI(Vue)
  • src/core/instance/index.js

这这里找到 Vue,用function实现的类。

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

通过 new 来实例化。后面 initMixin(Vue) 都是把Vue传入,给Vue.prototype 扩展一些方法 Vue按照功能把这些拓展分散到各个模块中去实现,好维护。

initGlobalAPI 给Vue对象本身扩展全局的静态方法 src/core/global-api/index.js

这里后面跟进。

参考链接 #

发现之前的连接太匆忙,这里稍微解释一下

这篇分析主要参考的这个网站,除了文字版还搭配了视频版。 https://ustbhuangyi.github.io/vue-analysis/v2/prepare/directory.html

另一个偏,介绍 vue-cli 源码的,还没开始看 https://kuangpf.com/vue-cli-analysis/