I have been developing a vue project for a while. I used angularjs before and later used reactjs, but I didn’t have time to record my thoughts on the source code at that time. Now I don’t want to waste this hard-won thinking anymore, I want to persist! !
I personally feel very happy to read the source code. Every time I read a paragraph, I feel much more fulfilled. I don’t know if you are the same as me.
The vue source code is a combination of many modules (modules) using rollup tools, which can be seen from it. Now let’s download the vue project from github and start our “thinking” today.
The source code version I downloaded is: "version": "2.5.7",
The source code start location can be seen from here
"dev": "rollup -w -c build/ --environment TARGET:web-full-dev"
// Find TARGET: web-full-dev from build/ This is after running and compiling (supporting current browsers, because ES6-7 is widely used).
// Runtime+compiler development build (Browser)
'web-full-dev': {
entry: resolve('web/'),
dest: resolve('dist/'),
format: 'umd',
env: 'development',
alias: { he: './entity-decoder' },
banner
},
The starting file was found, "web/", and then we looked for the Vue object all the way and finally found it in "instance/":
// This is where Vue startsfunction Vue (options) {
// If you determine whether it is a production environment and do not create an object through the new keyword, print a warning on the console if (.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
It seems that it's over here because our purpose is to find the starting position, but I have a question, why does Vue require so many layers?
-> runtime/ -> core/ -> instance/
After I looked at the source code carefully, I suddenly realized that we first saw what these files did:
（1）instance/
Some clues can be seen from the naming of Vue modules, instance (instance).
This file is the beginning of the Vue object and is also a centralized file for the Vue prototype method
// _init initMixin(Vue) // $set、$delete、$watch stateMixin(Vue) // $on、$once、$off、$emit eventsMixin(Vue) // _update、$forceUpdate、$destroy lifecycleMixin(Vue) // $nextTick, _render, and multiple internal callsrenderMixin(Vue)
These methods can only be called if instantiated.
（2）core/
This file is created and initially processed in Instance/ and processed again. So what did he mainly do? We do not consider the operation environment
initGlobalAPI(Vue)
Yes, I called this method, it's very simple and clear --- "Initialize the global interface",
Let's go into the initGlobalAPI method
export function initGlobalAPI (Vue: GlobalAPI) {
// config
const configDef = {}
= () => config
// In a non-production environment, if you modify the contents of the configuration file config, you will prompt a warning if (.NODE_ENV !== 'production') {
= () => {
warn(
'Do not replace the object, set individual fields instead.'
)
}
}
// Define the config attribute and listen for changes (Vue, 'config', configDef)
// exposed util methods.
// NOTE: these are not considered part of the public API - avoid relying on
// them unless you are aware of the risk.
= {
warn,
extend,
mergeOptions,
defineReactive
}
= set
= del
= nextTick
= (null)
// Create an empty object of ASSET_TYPES for vue ASSET_TYPES.forEach(type => {
[type + 's'] = (null)
})
// this is used to identify the "base" constructor to extend all plain-object
// components with in Weex's multi-instance scenarios.
._base = Vue
extend(, builtInComponents)
//
initUse(Vue)
//
initMixin(Vue)
//
initExtend(Vue)
// , ,
initAssetRegisters(Vue)
}
This is basically static methods, that is, call them in the form of Vue.xxx.
（3）runtime/
Here are some extensions and add __patch__ and $mount (mount element) on .
// (model and show) and (Transition and TransitionGroup)extend(, platformDirectives)
extend(, platformComponents)
// install platform patch function
.__patch__ = inBrowser ? patch : noop
// public mount method
.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
（4）
One thing is to rewrite $mount. Vue rewrites different $mounts according to different operating environments
const mount = .$mount
.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
...
return (this, el, hydrating)
}
Summarize:
At this point, we found the file that started executing, and what is the use of each file, how to do it, and what I have done, I will write it next time. But at the beginning, we should not care too much about every detail and do not have to understand every line of code. If that happens, we will be really tiring and may not have the courage to persevere.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.