“This is the fifth day of my participation in the August More Text Challenge.

Write in the front: on the first Saturday after I came to Shenzhen to work, I made an appointment to participate in a Vue offline communication activity with the big guy I knew from digging gold nuggets. I have learned some things and derived some knowledge points, which are now recorded for mutual encouragement with you.

This is about my harvest from the offline activity of Vue Shenzhen on Saturday

The activity lasted for one and a half hours and was divided into two parts. The first part was about TS, and the second part was about Vue2 upgrading Vue3. See below for details:

Online communication

The first part is about TS gymnastics (yes, gymnastics) practice, PERSONALLY do not understand, mainly remember the content is about TS(static language) and JS(dynamic language) a difference -> function overload

First put the big guy’s PPT content, because I compare vegetables, so I am not aware of the state of li.

conclusion

Function overloading

First of all, there is no real overloading of functions in JavaScript, because JS is a dynamic language. In JavaScript, two functions with the same name appear in the same scope, and the latter one overwrites the previous one, so there is no real overloading of functions in JavaScript. But TS is a superset of JS, and it is a static language, so it can have function overloading.

The so-called function overloading refers to the same function name, different parameter list (including parameter number and parameter type), according to the different parameters to perform different operations. (Simple understanding is that the same function, wear different parameters, the execution of different logic.)

Function overload(a){console.log(' one argument ')} function overload(a,b){console.log(' two arguments ')} // In programming languages that support overloading, Such as Java phrase (1); // overload(1,2); // overload(1); // overload(1,2); // Two parametersCopy the code

Offline communication

The second part was explained offline by Huawei boss, Axios code contributor, about the practice of upgrading Vue2 project to Vue3 project, and it was a live demonstration of the official release of Vue is the upgrade plug-in (VUE-compat), and the plug-in encapsulated by the boss (forgive me for forgetting the name), and the implementation of its underlying principles How to migrate Vue2 to Vue3 –> AST parsing and template parsing

AST parse

Also, first paste the big guy’s explanation

About Babel parse ES6 code into ES5 code

To convert our code, Babel does three things:

  • Parser parses our code into an AST.

  • Transformer converts the AST generated by Parser into the new AST using our configured plugins/ Presets.

  • Generator generates new code from the transformed AST

conclusion

So, on the Vue2 project upgrade Vue3 project plug-in operation principle, in fact, and ES6 elegant degraded compilation into ES5 code principle, and the principle of virtual Dom is roughly the same, the same key word is AST tree, that is, the JS code into Json format, after processing and then compiled back.

End