preface

On September 18, 2020, at 11pm, the Vue team announced the release of VUe.js 3.0, codename “One Piece”.

Two days before Vue3 was released, blogs, moments of friends and official accounts were all such a news. React16 was also not so hot when it was released. It can be seen that people are paying more and more attention to Vue, and Vue has 1.3 million users. You really had a lot to do with it.

Vue3 came, although very excited, but heart very MMP, said that I could not learn, but I still downloaded the source code immediately, went to check the official document, really on the way to react farther and farther. Portal:

  • Official documentation: Official documentation
  • Migration Guide: Migration guide
  • Source address: Vue3.0.0 source
  • Official release documents: Release documents
  • Vant supports Vue3.0: Vant

update

The update to Vue3.0 includes a change from config API to Composition API and TypeScript support.

Vue3.0 on the basis of 2, some internal methods are exposed, so that Vuer can use Vue API more open;

Previously only a Vue was exposed and could only be created using a new Vue, but now the application is created using createApp; Now Vue is not a function, but an Object;

The internal structure of Vue3 has been rewritten as a set of decoupled modules. Part of the performance improvement is that the new architecture provides better maintainability and allows end users to tree-shaking to reduce the run-time volume size by half, reducing the code size and making it faster.

For those of you who want to read the source code, please note the package. Jon of vue3 source code

"dev": "node scripts/dev.js",
Copy the code

Instead of

"dev": "node scripts/dev.js --sourcemap --environment TARGET:web-full-dev",
Copy the code

Then the console runs NPM run dev to see the source code in the browser:

Vue3 source directory

The Vue3 source directory contains three:

  • Packages: home directory for Vue core source code
  • Scripts: same as before, store Vue script files, used for compilation and packaging, etc.
  • Test-tds: tests the TS file

Vue3 source packages analysis

The core source code for Vue3 is in Packages and the main entry is in the Vue directory.

  • Compiler-core: compiles core source code
  • Compiler-dom: Source code associated with dom partial compilation
  • Compiler-sfc: Single-file source for compiling part
  • Compiler-ssr: Server-side rendering, compiling the relevant source code
  • Reactivity: the responsive part of Vue’s core proxy-related code
  • Run-time core: Runtime related core source code, including lifecycle, vNode, Watch, and other apis
  • Runtime-dom: core source code for the DOM at runtime, including createApp, etc
  • Run-time test: code used for vUE internal tests
  • Server-renderer: server-side rendering code
  • Shared: A common Vue tool library
  • Size-check: The simplest vUE application inside vUE, used to test tree-shaking code size
  • Template-explorer: compiled file browsing tool used internally in Vue
  • Vue: indicates the main entry file of vUE

conclusion

About Vue3 updated what, not to say, the first two days of the net is full of such articles, today is mainly for their own start, the next will follow Vue3 source interpretation.