preface

Vue3 out also has a good whole child, but Vue2 source principle learning, whether in a promotion pay rise or in another job on the road, has been a necessary link, should be the “interview rocket, work screw” this sentence. Although before Vue2 source code also have studied, but has not been a systematic summary, to put it bluntly is lazy. Recently in the nuggets to see Li Yongning big man “Vue source interpretation” series of articles, and began to be ready to move. This is mainly a review of the core implementation, not too much detail.

The source address

Vue source code for this study is version 2.6.14, git command download:

git clone https://github.com/vuejs/vue.git
Copy the code

Here’s my annotated source code:

git clone https://github.com/zhangquanming/vue.git
Copy the code

Flow

Flow is a static type checking tool for JavaScript from Facebook. Vue 2.x source is the use of Flow to do static type checking. Other tools like Flow are TypeScript. You should be familiar with TS. If you are interested in Flow, you can go to the official document to learn about it.

Debugging environment

After downloading the source code, go to the root directory and install the dependencies

npm i
Copy the code

Modify the dev script to add sourcemap

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

Launch project:

npm run dev
Copy the code

Vue. Js and vue.js.map files can be found in the dist directory. Next we’ll create a new file called test.html under the /examples directory

 <! -- /examples/test.html -->
 <! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
</head>
<body>
  <div id="app">
    {{ msg }}
  </div>
  <script src=".. /dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app'.data: {
        msg: 'hello vue'}})</script>
</body>
</html>
Copy the code

Open the test.html file in a browser and use the console to debug breakpoints and watch them run step by step.

The directory structure

| - # performance benchmarks and benchmarking | | - dist # release directory - examples sample # # | - flow flow type checking | | - packages # independent outside of the core code library - # scripts Build configuration, scripting | | - SRC # source directory - the test # test directory | - types # TS type declarationsCopy the code

Vue source code is under SRC, below we focus on SRC directory:

SRC | - # compiler to compile the relevant template parsing into ast syntax tree, ast syntax tree optimization, code generation, and other functions. | - core core code # | | - # components common component, Such as keep alive - | | - config. Js # some default configuration items | | - global - # API global API package | | -- index. Js | | - # instance constructors, etc. | | - the observer # Responsive related | | | - util # tools function ` virtual DOM related | - platforms - vdom # # different platforms support | | | - web # web end ` | -- - # weex native client Server # server rendering, this part of the code is running on the server node.js. | - SFC #. Vue file parsing, will the vue file content is parsed into a JS object. '-- shared # shared code, which defines utility methods shared by vue.js on the browser side and vue.js on the server side.Copy the code

To find the entrance

By running the build command NPM run dev, I can find the build script:

// package.json
{
"scripts": {
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev".// ...}}Copy the code
  • Dev scripts-c scripts/config.jsThis is where the configuration file resides.
  • parameterTARGET:web-full-devIs the output file configuration item.
// scripts/config.js
const builds = {
   // ...
  // Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),   // Build the entry
    dest: resolve('dist/vue.js'),       // Target file
    format: 'umd'.// Output specification
    env: 'development'.alias: { he: './entity-decoder' },
    banner
  }
  // ...
Copy the code

Format denotes the constructed file specification:

  • cjssaidCommon.jsGauge, for webpack1.
  • essaidES ModuleSpecification, ES module, for webpack2+.
  • umdsaidUMDSpecification, compatible with CJS and AMD, for browsers.

When creating a project using vuE-CLI, we were asked to choose between the Runtime Only version or the Runtime + Compiler version. There are also hints from the individual configuration as to what version of the file is being built. Let’s look at the differences between the two versions:

  • Runtime Only – It is usually necessary to compile.vue files into JS rendering functions with vue-loader tools such as Webpack. Since the build has already been compiled, you can use Only the Runtime package, which is smaller.
  • Runtime + Compiler – If you do not precompile, or if you use a dynamically compiled template, such as Vue’s template property and pass in a string, and need to compile on the client side, you need to include the full package of the Compiler.

From the single configuration above, we can find the entry and exit, and the entry is resolve(‘web/entry-runtime-with-compiler.js’). Let’s look at the resolve function first:

// scripts/config.js
const aliases = require('./alias')
const resolve = p= > {
  const base = p.split('/') [0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1))}else {
    return path.resolve(__dirname, '.. / ', p)
  }
}
Copy the code
// scripts/alias.js
const path = require('path')
const resolve = p= > path.resolve(__dirname, '.. / ', p)
module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')}Copy the code

In the end we get entry documents for: SRC/platforms/web/entry – the runtime – with – compiler. Js, next we just starting from the entrance to the file, see the realization of the vue.

A link to the

Vue (V2.6.14) source code detoxification (pre) : handwritten a simple version of Vue

Vue (V2.6.14) source code detoxification (a) : preparation

Vue (v2.6.14) source code detoxification (2) : initialization and mount (to be continued)

Vue (V2.6.14) source code detoxification (three) : responsive principle (to be continued)

Vue (V2.6.14) source code detoxification (four) : update strategy (to be continued)

Vue (v2.6.14) source code detoid (v) : Render and VNode (to be continued)

Vue (v2.6.14) source code: Update and patch (to be continued)

Vue (v2.6.14) source code detoxification (seven) : template compilation (to be continued)

If you think it’s ok, give it a thumbs up!! You can also visit my personal blog at www.mingme.net/