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()
【 Share, like, watch 】 three consecutive, let more people join us ~~