上一篇
源码入口
通过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
...
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目录结构
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3716726efe72398fb5d23ecc8a27e766.jpeg)
下一篇