


Detailed introduction to source code entry files in vue (detailed tutorial)
This article mainly introduces the analysis of vue source code entry files (recommended). Now I will share it with you and give you a reference.
I have been developing vue projects for some time. I used angularjs before and later 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 },
The starting file is found "web/entry-runtime-with-compiler.js", then we searched all the way for the Vue object 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 that it is over here, because we The purpose 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
Some clues can be seen from the naming of the Vue module, 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 call this method. It's very simple and clear---"Initialize the global interface",
Let's walk into 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
The only thing I did was to rewrite $mount. Vue rewrites $mount according to different operating environments. Write different $mount
const mount = Vue.prototype.$mount Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { ... return mount.call(this, el, hydrating) }
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to configure the babel configuration file in vue-cli
How to use babel installation and configuration tutorial
Use gm cropping to synthesize pictures under Nodejs
The above is the detailed content of Detailed introduction to source code entry files in vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.

The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.

Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.

There are three common methods for Vue.js to traverse arrays and objects: the v-for directive is used to traverse each element and render templates; the v-bind directive can be used with v-for to dynamically set attribute values for each element; and the .map method can convert array elements into new arrays.

There are two ways to jump div elements in Vue: use Vue Router and add router-link component. Add the @click event listener and call this.$router.push() method to jump.

The methods to implement the jump of a tag in Vue include: using the a tag in the HTML template to specify the href attribute. Use the router-link component of Vue routing. Use this.$router.push() method in JavaScript. Parameters can be passed through the query parameter and routes are configured in the router options for dynamic jumps.
