Vue source code entry file example analysis

This article mainly introduces the analysis of vue source code entry files (recommended). The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

I have been developing vue projects for some time. I used angularjs before and then reactjs. But at that time, I never had time to record my thoughts on looking at the source code. Now I don’t want to waste this hard-won thinking. I want to persist! !

I personally feel very happy when I read the source code. Every time I read the previous paragraph, I feel a lot more fulfilled. I wonder if you are the same as me.

vue source code is a combination of many modules using the rollup tool, which can be seen from package.json. Now let us download the vue project from github and start our "thinking" today.

The source code version I downloaded is: "version": "2.5.7",

The starting position of the source code can be seen from here

"dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev"

// 从build/config.js 中找到 TARGET: web-full-dev 这是运行和编译（支持现在的浏览器，由于里面大量应用了ES6-7）后的

 // Runtime+compiler development build (Browser)
 '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
 },

We found the starting file which is "web/entry-runtime-with-compiler.js", and then we looked for the Vue object all the way and finally found it in "instance/index.js":

// 这是Vue 的开始位置
function Vue (options) {
 // 判断如果是不是生产环境，且不是通过new关键字来创建对象的话，就在控制台打印一个warning
 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)
}

It seems like it’s all over here, because our goal is to find the starting position, but I have a question, why does Vue need so many layers?

entry-runtime-with-compiler.js
->
runtime/index.js
->
core/index.js
->
instance/index.js

When I looked at the source code carefully, it suddenly dawned on me. Let’s first take a look at what these files have done:

(1) instance/index.js

We can see some clues from the Vue module naming, instance (instance).

This file is the beginning of the Vue object, and it is also the centralized file of the Vue prototype chain (prototype) methods.

// _init
initMixin(Vue)
// $set、$delete、$watch
stateMixin(Vue)
// $on、$once、$off、$emit
eventsMixin(Vue)
// _update、$forceUpdate、$destroy
lifecycleMixin(Vue)
// $nextTick、_render、以及多个内部调用的方法
renderMixin(Vue)

These methods can only be called after they are instantiated. .

(2) core/index.js

This file is processed again after the creation and preliminary processing of Instance/index.js. So what did he mainly do? We don't consider the running environment

initGlobalAPI(Vue)

Yes, we just called this method. It's very simple and clear---"Initialize the global interface",

Let's Enter the initGlobalAPI method

export function initGlobalAPI (Vue: GlobalAPI) {
 // config
 const configDef = {}
 configDef.get = () => config
 // 在 非生产环境，如何修改了配置文件config里面的内容会提示警告
 if (process.env.NODE_ENV !== 'production') {
  configDef.set = () => {
   warn(
    'Do not replace the Vue.config object, set inpidual fields instead.'
   )
  }
 }
 // 定义config 属性， 监听变化
 Object.defineProperty(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.
 Vue.util = {
  warn,
  extend,
  mergeOptions,
  defineReactive
 }

 Vue.set = set
 Vue.delete = del
 Vue.nextTick = nextTick

 Vue.options = Object.create(null)
 // 给vue 创建 ASSET_TYPES 的 空对象
 ASSET_TYPES.forEach(type => {
  Vue.options[type + 's'] = Object.create(null)
 })

 // this is used to identify the "base" constructor to extend all plain-object
 // components with in Weex's multi-instance scenarios.
 Vue.options._base = Vue

 extend(Vue.options.components, builtInComponents)
 // Vue.use
 initUse(Vue)
 // Vue.mixin
 initMixin(Vue)
 // Vue.extend
 initExtend(Vue)
 // Vue.component, Vue.directive, Vue.filter
 initAssetRegisters(Vue)
}

These are basically static methods, that is: called in the form of Vue. xxx.

(3) runtime/index.js

Here are some extensions and __patch__ and $mount (mounting elements) added to Vue.prototype .

// Vue.options.directives（model和show）和 Vue.options.components（Transition和TransitionGroup)
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

// public mount method
Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 el = el && inBrowser ? query(el) : undefined
 return mountComponent(this, el, hydrating)
}

(4)entry-runtime-with-compiler.js

Just do one thing Rewrite $mount, Vue rewrites different $mount

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 ...
 return mount.call(this, el, hydrating)
}

Summary:

to So we found the file to start executing, what is the use of each file, how to do it specifically, and what was done I will write about it next time. But we shouldn’t care too much about every detail at the beginning, and don’t have to understand every line of code. If that is the case, it will be really tiring, and we may not have the courage to persist.

Related recommendations:

Detailed explanation of webpack multi-entry file page packaging

The above is the detailed content of Vue source code entry file example analysis. For more information, please follow other related articles on the PHP Chinese website!