Series of articles:

  • Vue source code interpretation (Design)
  • Vue source code interpretation (Rollup)
  • Vue source code interpretation (entry into the overall process of the constructor)
  • Vue source code interpretation (responsive principle introduction and Prop)

Source directory design

Vue.js source directory design is as follows:

|-- .circleci         # CI configuration directory
|-- benchmarks        # Vue performance test
|-- dist              # Build directory
|-- flow              Type declaration for # flow, similar to TypeScipt
|-- packages          # Derived NPM packages, such as Vue-server-renderer and Vue-template-compiler
|-- scripts           # Build configuration and build script
|-- test              End-to-end testing and unit test cases
|-- src               # source code
|   |-- compiler      # Compile the relevant code
|   |-- core          # Core code
|   |-- platforms     # cross-platform
|   |-- server        Server rendering
|   |-- sfc           #.vue file parsing logic
|   |-- shared        # Utility functions/shared code
Copy the code

Make a brief introduction to the above catalogue as follows:

  • benchmarks:vueTo give the user an adequate performance demonstration.
  • dist:rollupThe build directory, where all theVueDifferent versions of the files after the build.
  • flow: It’s made by FacebookJavaScriptStatic type checking tool, earlyVue.jsChoose theflowNot the current oneTypeScriptTo do static type checking while in the latestVue3.0Version is selectedTypeScriptTo rewrite.
  • packages:Vue.jsDerived othersnpmBags, they’re hereVueAutomatically generated from source code at build time and always andVue.jsKeep the same version, mainlyvue-server-rendererandvue-template-compilerOf the two packages, the last one is used in our scaffolding project, which is used.vueDocument developmentVueThis package will be used in the project.
  • scripts:rollupBuild configurations and build scripts,Vue.jsThe secrets to being able to build different versions for different environments are all in this directory.
  • test:Vue.jsTest catalog, automated tests are critical for an open source library, and test coverage is an important measure of a library’s quality to some extent. Test cases are of great benefit both for development and for reading source code, which is read through test casesVueSource code is generally accepted as one way to do this.
  • src/compiler: This directory contains andVue.jsCompile related code, including: template compilation to AST abstract syntax tree, AST abstract syntax tree optimization, and code generation related code.
// Use the compiled version
new Vue({
  data: {
    msg: 'hello,world'
  }
  template: '<div>{{msg}}</div>'
})

// There is no need to use the compiled version
new Vue({
  data: {
    msg: 'hello,world'
  },
  render (h) {
    return h('div'.this.msg)
  }
})
Copy the code
  • src/core: This directory containsVue.jsCore code, including: built-in componentskeep-alive, global API (Vue.use,Vue.mixinandVue.extend), instantiation, reactive correlation, virtual DOM, and utility functions.
|-- core
|   |-- components      # Helper component
|   |-- global-api      # global API
|   |-- instance        # instantiation
|   |-- observer        # responsive
|   |-- util            # Utility function
|   |-- vdom            # virtual DOM
Copy the code
  • src/platform:Vue2.0Provides cross-platform capability inReactThere areReact NativeCross-platform client, while inVue2.0The cross-platform counterpart isWeex.
| - platform | | - web # web browser side | | - weex # native clientCopy the code
  • src/server: Vue2.0Provides the ability to render on the server side. All the code related to rendering on the server side is includedserverDirectory, this part of the code runs on the server side, not the Web browser side.
  • src/sfcWhat are the main functions of this directory.vueThe file parses into aJavaScriptObject.
  • src/sharedThis directory contains shared code that is used by both Web browsers and servers.

Architecture design

As we can easily see from the above directory structure, vue.js is divided into three parts: core code, cross-platform relevance, and common utility functions.

At the same time, the architecture is layered, the bottom layer is a constructor (ordinary function), the top layer is an entry, that is, a complete constructor exported to the user to use. In the middle layer, we need to gradually add some methods and properties, mainly prototype-related and global API related.