“ This is my participation 8 The fourth of the yuegengwen challenge 5 God , Check out the activity details ：8 Yuegengwen challenge ”

Write it at the front : The first Saturday after working in Shenzhen , I made an appointment with the big guys I knew in nuggets to attend a Vue Offline communication activities , There are some lessons learned , And some derived knowledge points , Now record it , Let me share with you .

It's about my participation on Saturday Vue Shenzhen The harvest of offline activities

The total activity is one and a half hours , Divided into upper and lower parts , The first half is about TS Of , The second half is about Vue2 upgrade Vue3 Of .
See below for details :

Online communication

The first part is about TS Artistic Gymnastics ( Yes , Artistic Gymnastics ) practice , I don't quite understand , The main thing I remember is about TS( Static language ) and JS( Dynamic language ) A difference of --> function overloading

Let's put the big guy's PPT Content , Because I compare the dishes , So I'm in a state of unconsciousness .

summary

function overloading

First of all ,JavaScript There is no real function overload in , because js It's dynamic language , stay JavaScript in , Same scope , There are two functions with the same name , The back one will cover the front one , therefore JavaScript There is no real overloading . but TS yes JS Superset , And it's a static language , Therefore, there can be function overloading .

So called function overload , It means that the function name is the same , The parameter list of the function is different ( Including the number and type of parameters ), Perform different operations according to different parameters .( The simple understanding is , Same function , Wear different parameters , The logic of execution is also different .)

function overload(a){
    console.log(' One parameter ')
}

function overload(a,b){
    console.log(' Two parameters ')
}

//  In programming languages that support overloading , such as  java
overload(1);         // One parameter 
overload(1,2);    // Two parameters 


//  stay  JavaScript  in 
overload(1);         // Two parameters 
overload(1,2);    // Two parameters 

 Copy code 

Offline communication

The second part is the boss of Huawei ,axios Code contributors offline , About Vue2 Project upgrade to Vue3 Project practice , And it was demonstrated on the spot Vue The official release is to upgrade the plug-in (vue-compat), And plug-ins encapsulated by big guys ( Forgive me for forgetting my name ) Live demonstration , And the bottom principle and implementation are explained on the spot , How exactly Vue2 To Vue3 Migration of --> AST Parsing and template analysis

AST analysis

It's also , First post the explanation of the boss

About Babel Yes ES6 Code resolution as ES5 Code

To convert our code , babel Did three things ：

• Parser Parse our code into AST.

• Transformer Use our configured plugins/presets hold Parser Generated AST Turn into new AST.

• Generator Put the converted AST Generate new code

summary

So , About Vue2 Project upgrade Vue3 How the plug-in works in the project , Actually sum ES6 Elegant downgrade compiled into ES5 The principle of code , And virtual Dom The principle is roughly the same , The same key word is AST Trees , That is the js The code becomes Json Format , After processing, compile it back .

End