Vue source code read a (first knowledge of vUE source code)
First find build under package.jsonFrom here we can see the entry address of this compilation. So let’s go in here.Builds are the rollup profile.
If you go to the./config file, you can see that the Build object is a build configuration that builds the file, and then the genconfig method is used to further process the rollup configuration file, which becomes the builds configuration file under build.js.
So let’s focus on.config
'web-full-dev': {
entry: resolve('web/entry-runtime-with-compiler.js'),
dest: resolve('dist/vue.js'),
format: 'umd'.env: 'development'.alias: { he: './entity-decoder' },
banner
}
Copy the code
The resolve method mainly calls aliases to find the absolute path.So we need an entry, ‘SRC /platforms/web/entry-runtime-with-compiler.js’
Let’s go into this file to take a quick look at the vUE creation process.
First, the entry-runtime-with-Compiler. js file is introduced into Vue from other files, so let’s go deeper layer by layer.
//entry-runtime-with-compiler.js
import Vue from './runtime/index'
//./runtime/index
import Vue from 'core/index'
//core/index
import Vue from './instance/index'
//src/code/instance/index.js
Copy the code
All the way down to this file, you find the vue constructor.
And then do some initialization
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
Copy the code
Click through one by one and you can see that this is mainly to assign to the Vue. Prototype function, that is, to the Vue prototype object.Back to thecore/index.jsUnder this file
Mainly Vue static method assignment.
initGlobalAPI(Vue)
Copy the code
You can see it by clicking in. ./runtime/indexThe following are the main configurations of vue.config
entry-runtime-with-compiler.jsBelow is the $mount method
Ok, the above is a general process of VUE, specific details, I hope we can do well in the future.