Vue source code analysis (a): new Vue () did what
author: @TiffanysBear
Before looking at the new Vue did what we first do some basic understanding of the Vue source code, if you already have a basic understanding of the design basis of the source directory, etc., you can skip the following section.
Source catalog design
Vue.js source in the src directory, which directory structure.
src
├── compiler # 编译相关
├── core # 核心代码
├── platforms # 不同平台的支持
├── server # 服务端渲染
├── sfc # .vue 文件解析
├── shared # 共享代码
compiler
compiler to compile the directory that contains Vue.js all related code. The template includes parsing syntax tree into AST, AST syntax tree optimized, code generation functions.
Compilation of work can be done when building (can use webpack, vue-loader plug-ins, etc.); can also be done at runtime, containing building features Vue.js. Is a compilation consumption performance of the work, so the former is more recommended - compiled offline.
core
Vue.js core directory contains the core code, including built-in components, global API package, Vue instantiated, Obsever, Virtual DOM, and the like utility function Util.
platform
Vue.js MVVM framework is a cross-platform, it can run on the web, it can also run on native weex with the client. Vue.js entrance platform, the two main directory entry represents 2, each packed into Vue.js. running on the web and on the weex
server
Vue.js 2.0 supports server-side rendering, server side rendering all related logic in this directory. Note: This part of the code is run on the server side of Node.js, and do not run in the browser's Vue.js confused.
Server rendering main job is to render the components for server-side HTML string, send them directly to the browser, and finally static marks "hybrid" application is fully interactive on the client.
sfc
Usually we develop Vue.js will help build webpack, and then to write the assembly by .vue single file.
Code logic will .vue file contents of this directory resolves to a simple JavaScript object.
shared
Vue.js will define some tools methods, tools, methods are defined here will be shared by the Vue.js Vue.js browser and server.
Next we come to look at the Vue import documents, our analysis is based on the next platform for the analysis carried out under the web environment, from the packaging configuration of the config package.json and where it can be seen running in a web environment （Runtime only (CommonJS))portal file web/entry-runtime.jsunder.
Vue entry file
Vue entrance file directory vue / src / core / instance / index.js
// vue/src/core/instance/index.js
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
ES5 is used in the wording, and not the wording of the advantages of Class ES6 is because:
1, using the incoming mixed Mixin Vue manner, as the method of increasing the prototype prototype Vue. This method is difficult to implement class
2, code modules such reasonable division manner to extend across multiple modules to achieve, so that the code will not be too large file, ease of maintenance and management. This programming skills can later be used for code development implementation.
Mixin increased by prototyping:
// vue/src/core/instance/index.js
initMixin(Vue) // _init
stateMixin(Vue) // $set、$delete、$watch
eventsMixin(Vue) // $on、$once、$off、$emit
lifecycleMixin(Vue) // _update、$forceUpdate、$destroy、
renderMixin(Vue) // $nextTick、_render
initGlobalAPI
In vue / src / core / index.js in, initGlobalAPI (Vue) call, is to increase the static method for Vue,
Static methods in the path vue / src / core files in the / directory / global-api, the Vue are to be added
such as:
Vue.use // 使用plugin
Vue.extend
Vue.mixin
Vue.component
Vue.directive
Vue.filter
With these basic understanding and a step by step to find the track, step by step, we find a new Vuelocation, and then we look at new Vuein the end to do what?
new Vue did what
It seems from the file entry by new keyword initialization, call
// src/core/instance/index.js
this._init(options)
Then increased from prototyping Mixin see, initMixin (Vue), is a prototype method is called Vue increased _init
// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
....
....
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
....
....
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
So, it seems from the above functions, new vue things done, like a flow chart as launched, respectively,
- Consolidated configuration
- Initialization life cycle
- Initialization Event Center
- Initialization rendering
- Call the
beforeCreatehook function - init injections and reactivity (binding at this stage properties have been injected, and was
$watchturned into reactivity, but$elstill not generated, that is not generated DOM) - Initialization state state (initialized data, props, computed, watcher)
- Calls created hook function.
In the final target initialization, if detected el property, then call vm. $ Mount method to mount vm, mount template is rendered into the final DOM.
Vue initialization code mainline logic is very distinct, very clear that the logic and flow, this method of programming worth learning.
At last
Now only a rough part of the function in terms new Vueof process and meaning, the next document will continue to learn and Vue source code analysis, will be followed by more detailed analysis of what each function later in the life cycle of concrete made lifecyle .