【vue2源码学习】— 入口

上一篇

源码入口

通过package.json我们可以发现
Vue.js 源码是基于 Rollup 构建的
它的构建相关配置都在 scripts 目录下。

构建命令

package.json
{
...
  "script": {
  	...
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex"
   	...
  }
  ...
}
Vue.js 源码构建的脚本命令如上
后面 2 条是在第一条命令的基础上，添加一些环境参数
执行 npm run build 的时候，
实际上是执行的 node scripts/build.js

build.js的逻辑很简单，大家有兴趣可以看看
过程大概如下
1.先从配置文件读取配置，
2.根据命令参数对构建配置进行过滤，
构建出不同的 Vue.js 

配置文件位置，在 scripts/config.js

Runtime Only 和 Runtime + Compiler

在config.js中我们看到有很多runtime和compiler字样
这涉及vue的两种运行模式

使用Runtime Only 的 Vue.js ，
通常需要借助如 webpack 的 vue-loader 工具
把 .vue 文件编译成 JavaScript，
即render函数
因为是在编译阶段做的，
所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量.


如果没有对代码做预编译，
但又使用了 Vue 的 template 属性并传入一个字符串，
则需要在客户端编译模板

// 需要编译器的版本
new Vue({
  template: '<div>{{ "需要编译器" }}</div>'
})

// 不需要
new Vue({
  render (h) {
    return h('div', '不需要')
  }
})
在 Vue.js 2，
最终渲染都是通过 render 函数实现
使用了template属性，需要编译成 render 函数，
这个编译过程会发生运行时，所以需要使用有编译器的版本。

编译过程对性能会有一定损耗，
所以通常我们更推荐使用 Runtime-Only 的 Vue.js。

Vue是什么

web 应用下
我们来看看 Runtime + Compiler 构建出来的 Vue.js，
它的入口是 src/platforms/web/entry-runtime-with-compiler.js

// src/platforms/web/entry-runtime-with-compiler.js
...
import Vue from './runtime/index'
...
对Vue进行一些处理
...

export default Vue


其他代码我们先不看
当我们的代码执行 import Vue from 'vue' 的时候，
就是从这个入口执行代码来初始化 Vue

然后我们进入src/platforms/web/runtime/index.js
import Vue from 'core/index'
...
对Vue进行一些处理
...
最后我们来看真正初始化 Vue 的地方，在 src/core/index.js
import Vue from './instance/index'
...
初始化全局 Vue API
initGlobalAPI(Vue)
...

在 src/core/instance/index.js 中是Vue 的定义
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)
}
至此可以明了
Vue实际上就是 Function 实现的类
然后在它的原型 prototype 以及它本身都扩展了一些的方法和属性

刻入DNA的图（生命周期)

请大家把vue的生命周期的图牢记于心
然后我们就准备正式开始了

点我看生命周期图片

源码src目录结构

下一篇