事关我周六参加Vue Shenzhen线下活动的收获

活动总共是一个半小时,分为了上下两部分,上半部分是关于TS的,下半部分是关于Vue2升级Vue3的.
详情见下文:

线上交流

第一部分是字节大佬讲述的关于TS体操(是的,体操)实践,个人听不太懂,主要记得的内容是关于TS(静态语言)和JS(动态语言)的一个区别 --> 函数重载

先放一下大佬的PPT内容,因为我比较菜,所以我是不明觉厉的状态.

总结

函数重载

首先呢,JavaScript中没有真正意义上的函数重载,因为js是动态语言,在JavaScript中,同一个作用域,出现两个名字一样的函数,后面的会覆盖前面的,所以JavaScript没有真正意义的重载。但TS是JS的超集,并且它是一个静态语言,因此是可以有函数重载的。

所谓函数重载,就是指函数名相同，函数的参数列表不同(包括参数个数和参数类型)，根据参数的不同去执行不同的操作。(简单理解就是,同一个函数,穿的参数不一样,执行的逻辑也不一样.)

function overload(a){
    console.log('一个参数')
}

function overload(a,b){
    console.log('两个参数')
}

// 在支持重载的编程语言中，比如 java
overload(1);         //一个参数
overload(1,2);    //两个参数


// 在 JavaScript 中
overload(1);         //两个参数
overload(1,2);    //两个参数

线下交流

第二部分是华为大佬,axios代码贡献者线下讲述的,关于Vue2项目升级为Vue3项目的实践,而且是在现场演示了Vue官方发布是升级插件(vue-compat),以及由大佬封装的插件(原谅我忘了叫什么)现场演示,并且现场讲解了其底层原理实现,究竟是怎么样进行Vue2到Vue3的迁移的 --> AST解析以及template解析

AST解析

也是,先贴大佬的讲解

关于Babel对ES6代码解析为ES5代码

为了转换我们的代码， babel 做了三件事：

Parser 解析我们的代码转换为 AST。
Transformer 利用我们配置好的 plugins/presets 把 Parser 生成的 AST 转变为新的 AST。
Generator 把转换后的 AST 生成新的代码

总结

所以的话,关于Vue2项目升级Vue3项目的插件运行原理,其实和ES6优雅降级编译成ES5代码的原理,以及虚拟Dom的原理大致相同,同一个关键词就是AST树,也就是把js代码变成Json格式,进行处理之后再编译回来.

事关我周六参加Vue线下活动的收获

事关我周六参加Vue Shenzhen线下活动的收获

线上交流

总结

函数重载

线下交流

AST解析

关于Babel对ES6代码解析为ES5代码

总结

End