Wechat official account: [Dafront-end Post] follow Dafront-end Post. Questions or suggestions, welcome to leave messages on the public account.

Vue is one of the most popular front-end frameworks today. It is an excellent progressive front-end framework. Its simplicity and ease of use are the reasons why many front-end engineers choose it. However, in order to stand out among many Vue engineers, its principles must be mastered. Next, we will learn some principles of VUE2 from the perspective of source code analysis.

Setup of debug environment

To obtain the vue

It is important to master the method of learning, we first vuE2 source code clone down, and then look at some important source directory.

Project Address:https://github.com/vuejs/vue

Git implementation:git clone https://github.com/vuejs/vue.git

Current version: “2.6.14”Install dependencies

npm i
Copy the code

If the installation to Phantom. Js is extremely slow, you can terminate early

Install a rollup

npm i rollup -g
Copy the code

Modify the dev script in package.json to add sourcemap

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web- full-dev",
Copy the code

Execute the development command to build vue.js

npm run dev
Copy the code

After the build is complete, the dist directory will generate the rebuilt sourcemap vue.js

Modify the examples/commit/index. HTML

<! -- <script src=".. /.. /dist/vue.min.js"></script> --> <script src=".. /.. /dist/vue.js"></script>Copy the code

Opening index. HTML, we can see sourcemap’s debugging convenience

Vue.js can debug code with breakpoints

Glossary explanation:

  • Runtime: Includes only the runtime, not the editor
  • Common: CJS specification for WebPack1
  • Esm: ES module for WebPack2
  • Umd: Compatible with CJS and AMD for browsers


The directory structure

Vue2 source directory, we focus on the source directory

Source subdirectory

The entrance

We execute the dev script in package.json and analyze the script until we find line 123 where the target environment is web-full-dev in scripts/config.js

// Runtime+compiler development build (Browser) 'web-full-dev': { entry: Resolve ('web/entry/runtime-with-compiler.js'), // import dest: resolve('dist/vue.js'), // target file format: Env: 'development', alias: {he: './entity-decoder'}, banner},Copy the code

Here we can see that the entry file is web/entry-runtime-with-compiler.js, but the Web directory is not found, so we can assume that the alias is set, and it is indeed found in scripts/alias.js

 web: resolve('src/platforms/web'),
Copy the code

SRC /platforms/web/entry- Runtime-with-compiler. js

The whole process

Let’s go from the entry file to what files it introduces and see what those files do

platforms/web/entry-runtime-with-compiler.js

Main function: Extends the default $mount method to handle template or EL options

import Vue from './runtime/index'
...
const mount = Vue.prototype.$mount
...
Copy the code

platforms/web/runtime/index

$mount: mounts the vue instance to the specified host element (obtains the DOM and replaces the host element).

core/index.js

Initialize the global API

Vue.set = set vue.delete = del vue.nextTick = nextTick initUse(Vue) // Implement vue.use function initMixin(Vue) // Implement vue.mixin function InitExtend (Vue) / / implementation Vue. The extend function initAssetRegisters ponent (Vue) / / registered Vue.com/directive/filterCopy the code

core/instance/index.js

The Vue constructor defines the Vue instance API

Function Vue (options) {// the constructor only executes _init this._init(options)} initMixin(Vue) // Implements init function stateMixin(Vue) // state related API $data,$props,$set,$delete,$watch eventsMixin(Vue) $on,$once,$off,$emit lifecycleMixin(Vue) // Life cycle API _update,$forceUpdate,$destroy renderMixin(Vue)// Render API,$nextTickCopy the code

core/instance/init.js

Creates an instance of the component and initializes its data, properties, events, and so on

InitLifecycle (VM) // $parent,$root,$children,$refs initEvents(VM) // Processes parent events and callback initRender(VM) // $slots,$scopedSlots,_c,$createElement callHook(vm, 'beforeCreate') initState injections (VM) // Use the injection initState injections (VM) // Initialize props, methods, data, computed, etc. Watch initProvide(VM) // Provide data injection callHook(VM, 'created')Copy the code

$mount: mountComponent

Mount, get vDOM, and convert to DOM

new Watcher()

Create component render watcher

updateComponent()

Perform initialization or update

update()

Initialize or update to convert the passed VDOM to A DOM. When initialized, dom creation is performed

render(): src\core\instance\render.js

Rendering component, get the VDOM

The overall Vue initialization process

  • new Vue()
  • _init()
  • $mount()
  • mountComponent
  • new Watcher()
  • updateComponent()
  • render()
  • _update()


Pay attention to the following [big front post]
Let’s learn and make progress together

【 Share, like, watch 】 three consecutive, let more people join us ~~