background

Originally is not the technical class of my background, is in the mud after a year to calculate the entrance to the front, I always keep in mind “paper come zhongjue shallow, must know this to practice. As a qualified keyboard warrior, only when everything falls on the keyboard, there will be gains.

A few days ago, Dingding reminded me of the one-year anniversary of my entry, which once again made me feel that time passed so quickly that it slipped away at the fingertips of our programmers.

So looking back on this year, I’m more familiar with vue. js and get started with React + TypeScript. In line with the central idea of eating one bite at a time, whip yourself now, no, whip yourself deeper into the Vue. Js principles to get a more thorough grasp of it.

What are you waiting for? Why don’t you start

Learning structure as shown below ⬇️(hey, touch party directly touch to use…)

serving

Forget about Flow, after all, and I used before TS deja vu, from the source directory design start.

Source directory design

Analyze the contents in the SRC directory

Platforms # Support server # Server render SFC #. Vue file parsing shared # codeCopy the code

Compiler As we all know, a big improvement in Vue 2.x is the Virtual Dom, which is generated by the Render Function. Therefore, we usually write the template, and then compile into the Render Function related logic in the compiler.

Core, as the name implies, is the core directory

Components # built-in global-api # global method API instance # Event, instantiation, observer, lifecycle and render helper functions observer # reactive util # utility method vDOM # virtual DOMCopy the code

Platforms is split into two platforms, Web and WEEX, and hosts platform-specific code such as Compiler, Runtime, Server, Util, etc. Platform is an entry file that can compile different vue.js files from different platform entries.

There is a big difference between server-side renderings running on Node.js and browser-side code.

The main job of server-side rendering is to render the components as HTML strings on the server side, send them directly to the browser, and finally “blend” the static tags into a fully interactive application on the client side.

SFC parses the.vue file contents into a JavaScript object.

Shared The utility methods defined here are shared between the browser and the server.

conclusion

After analysis, it can be seen that the functional modules of vue. js are split very clearly, the relevant logic is maintained in an independent directory, and the reused code is also drawn into an independent directory. Facilitate the later code reading and maintenance.