来源于慕课网,本文章只做总结。另:本人水平有限。大神忽略!
拿到源码后如何开始阅读
个人感觉此部分不是很重要,但还是总结一下。
这个其实可以通过npm scripts的命令来寻找到。因为vue的代码最后也会被打包编译。打开package.json文件便可看到以下命令,打包的scripts脚本有很多,大多数都是编译到不同平台运行的脚本文件(比如weex或ssr相关)。这里关注npm run build
即可
"build": "node scripts/build.js"
我们可以根据脚本的提示找到scripts/build.js
打开文件后可以看到如下的代码,以及一些相关配置,主要是针对路径的处理和一些roolup
的配置。根据代码提示可以找到config.js
let builds = require('./config').getAllBuilds()
其实这个config
文件大致只做了三件事情
1.resolve函数,用来获取不同文件的路径,然后做一些处理(大约在28行)
2.builds常量的定义的编译类型对象,是一个map集合(大约在38行)。执行编译命令的时候会根据不同的npm scripts
选择不同的类型。这里我们可以关注一下Runtime+compiler
的那个版本。代码如下。
'web-full-esm': {
entry: resolve('web/entry-runtime-with-compiler.js'),
dest: resolve('dist/vue.esm.js'),
format: 'es',
alias: { he: './entity-decoder' },
banner
},
entry
定义的就是代码的打包入口。vue的源码也是正式的从这个文件开始的entry-runtime-with-compiler.js
。
dist
打包后的代码,dist/vue.esm.js
这个文件大家要关注一下。后期会通过vue-cli生成一个项目,代码调试基本都是在这个文件中进行。
-
genConfig
函数,是rollup的打包配置。没有关注太多。
4.平时开发使用的都是runtime-only
的代码。以上的文件是runtime-compiler
的版本,其实二者的区别在于runtime-only
会借助vue-loader
将template模板,render函数等渲染好然后浏览器直接执行js脚本,但是runtime-compiler
的版本是在执行过程中编译。其实在后期很多地方也是通过相同的函数实现,所以没有必要纠结到底要分析哪一种版本。
找到vue的主体代码
找vue代码的时候会遇见很多不同的函数,其实不必太在意。现在我们只管一门心思找到vue的主体代码即可
根据下面代码的提示,应该可以很快的定位到这个文件,他的真实路径是在src/platforms/web/ entry-runtime-with-compiler.js
。至于entry中缺少的那部分,其实vue内部使用别名alias
来做了处理。
entry: resolve('web/entry-runtime-with-compiler.js')
在entry-runtime-with-compiler.js
中可以看到如下代码。大约在8行。
import Vue from './runtime/index'
然后是runtime/index
。第一行,此处使用了alias别名处理。
import Vue from 'core/index'
然后是src/core/index
。第一行。
import Vue from './instance/index'
然后是./instance/index
。在这个文件中再也没有import Vue
的字样了,那就证明vue的主体函数就存放在这个文件下!其实代码很少,那就全部贴出来看一下!
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
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)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
我大概解释一下这几行代码。上边那一堆mixin函数其实就一些状态的初始化,比如说data内的可观察数据就是在stateMixin
中完成,生命周期就是在lifecycleMixin
,渲染就是在renderMixin
中完成。当我们使用new Vue的时候这些东西最后都会变成一个个方法,被挂载到vm实例上。
下边解释一下函数内部的代码,options就是new Vue({...options})。函数会先检查一下是否由new来生成,因为vm实例要是一个对象。然后直接执行_init方法,这个方法其实是在initMixin
中被挂载上去的。
最后总结一下,vue其实就是一个函数,然后在初始化的时候在prototype上挂载一堆方法,new vue的时候,其实生成的是一个实例,这个实例继承了一堆方法来辅助我们完成相应的开发。
下一篇就跟着代码的思路走,直接分析一下initMixin方法,看一看vue如何完成初始化!