Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of the vue source code architecture. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

download

Download Vue https://github.com/vuejs/vue on github

Npm install npm run dev

Up and running

Rollup + flow

Vue is packaged using rollup, and flow standardizes data types

Rollup can be applied with webpack first, it reads almost the same, time is limited, after all, only 5 minutes, this does not have to read the rollup document

Entrance

Open package.json

Let's look at the scripts configuration

"dev": "rollup-w-c scripts/config.js-- environment TARGET:web-full-dev", "dev:cjs": "rollup-w-c scripts/config.js-- environment TARGET:web-runtime-cjs-dev"

Find scripts/config.js.

open

Different TARGET will be selected depending on the config configuration.

Meanwhile, the process.env.NODE_ENV environment is configured here.

TARGET has CommonJS,ES Modules,UMD about the js introduction type

And weex,ssr.

'web-runtime-cjs-dev': {entry: resolve (' web/entry-runtime.js'), dest: resolve ('dist/vue.runtime.common.dev.js'), format:' cjs', env: 'development', banner}

Alias path is set under alias.js

Let's introduce src/platforms first.

There are web and weex entrances for web and weex, respectively.

Under the web file is the CommonJS,ES Modules,UMD about the js import type, the packaging entry of server

Open web/entry-runtime.js

Introduce

Import Vue from'. / runtime/index'export default Vue

Open. / runtime/index

Import Vue from 'core/index' Vue.prototype.$mount = function (el?: string | Element, hydrating?: boolean): Component {el = el & & inBrowser? Query (el): undefined return mountComponent (this, el, hydrating)} export default Vue

Added the mount method to the vue prototype

Devtools was processed and no reminder was installed to install devtools

Give this hint dev environment hint

You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at https://vuejs.org/guide/deployment.html

Platforms directory folder has been explained.

Core directory

Open core/instance/index

What is reflected in front of us is

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

InitMixin (Vue) is executed first.

Open init

Export function initMixin (Vue) {Vue.prototype._init = function (options?: Object) {const vm = this / / a uid vm._uid = uid++ let startTag EndTag / * istanbul ignore if * / if (process.env.NODE_ENV! = = 'production' & & config.performance & & mark) {startTag = `vue-perf-start:$ {vm._uid} `endTag = `vue-perf-end:$ {vm._uid}` mark (startTag)} / / a flag to avoid this being observed vm._isVue = true / / handle incoming options / / merge options if (options & & options._isComponent) {/ / optimize internal component instantiation / / since dynamic options merging is pretty slow And none of the / / internal component options needs special treatment. InitInternalComponent (vm, options)} else {/ / incoming options. The default options is merged and mounted to the vm.$options vm.$options = mergeOptions (resolveConstructorOptions (vm.constructor), options | | {} Vm)} / * istanbul ignore else * / if (process.env.NODE_ENV! = = 'production') {/ / Agent initProxy (vm)} else {vm._renderProxy = vm} / / Lifecycle initLifecycle (vm) / / emit on event initEvents (vm) / / handle render vdom initRender (vm) callHook (vm 'beforeCreate') / / handle Injections initInjections (vm) / / resolve injections before data/props / / Bidirectional data binding Monitor subscription initState (vm) initProvide (vm) / / resolve provide after data/props callHook (vm, 'created') / * istanbul ignore if * / if (process.env.NODE_ENV! = =' production' & & config.performance & & mark) {vm._name = formatComponentName (vm, false) mark (endTag) measure (`vue ${vm._name} init`, startTag EndTag)} / / render to dom if (vm.$options.el) {vm.$mount (vm.$options.el)}

Lifecycle

Open lifecycle

Export function callHook (vm: Component, hook: string) {/ / disable dep collection when invoking lifecycle hooks pushTarget () / / executes the periodic function of the object. The periodic function is finally processed into an array const handlers = vm.$options [hook] const info = `$ {hook} hook` if (handlers) {for (let I = 0, j = handlers.length; I < j) InvokeWithErrorHandling (handlers [I], vm, null, vm, info)}} if (vm._hasHookEvent) {vm.$emit ('hook:' + hook)} popTarget ()

When you callHook, you execute the corresponding cycle, what the developer wrote in the cycle function.

Events

InitEvents implements emit on and other methods. Please refer to listener subscriber mode, which is not explained in detail here.

Render

RenderMixin function

Added $nextTick _ render prototype object

$nextTick will be called immediately after dom is updated.

NextTick (fn, this) is a self-executing function

_ render returns js data of node, not dom

Made a Vdom.

InitRender function

Added _ c and $createElement to vm for rendering

State

If (! (key in vm)) {proxy (vm, `_ props`, key)}

As a proxy for the vue attribute, you can access this.a to get the value of this.data.a.

Export function initState (vm: Component) {vm._watchers = [] const opts = vm.$options if (opts.props) initProps (vm, opts.props) if (opts.methods) initMethods (vm, opts.methods) if (opts.data) {initData (vm)} else {observe (vm._data = {}, true / * asRootData * /)} if (opts.computed) initComputed (vm, opts.computed) if (opts.watch & & opts.watch! = nativeWatch) {initWatch (vm, opts.watch)}}

Monitor the data

StateMixin function

Add prototype object

Vue.prototype.$set = setVue.prototype.$delete = del

Other

Src/compiler did the compilation process.

Core/componetd did keep-alive.

Core/util encapsulates a general method

Core/vdom vdom algorithm

The above overall architecture analysis is complete.

This is the end of this article on "sample Analysis of vue Source Architecture". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.