vue3.0原理 —— complier

一、为什么要用vue3.0

1.核心代码进行了压缩，核心代码+composition API(合成函数):13.5KB,最小11.75kb
2.所有的runtime(运行时间)：22.5kb（vue2是32kb）

二、vue3.0带来的变化

1.按需加载&组合api
vue2里面是使用生命周期的方法，结合着，data，props，computed，watch这一系列绑定在vue实例上的方法，来控制整个代码。但这样会带来一些问题，当代码非常冗长的时候，或者逻辑非常复杂的时候，组件是不可读的。虽然，filter，directive，mixins带来了一些便利和灵活，但没有解决在组件之前想要共用一些逻辑，又想要这些逻辑容易阅读和理解的问题。
2.TS支持，新增：Fragment、Teleport、Suspense
Fragment：碎片，解决必须写根节点的问题
Teleport：全局组件，比如：弹窗，alert，dialog……
Suspense：异步加载，有些组件需要异步取得某些组件返回的结果渲染的dom结构，Suspense可以在组件里面去异步调取其他组件
3.性能提升1.3~2x

三、按需加载

1.基础：virtual DOM（虚拟dom），响应式算法（必须要有的）
2.非常用功能，按需加载，根据自己需求
v-model
transition

四、compiler的原理

1.静态node不再作更新处理
2.静态绑定的class，id不再作更新处理
3.结合打包的hint（提示），进行更新分析

4.事件监听器cache缓存处理（cachehandlers)
有些可能会重复创建的组件，比如说在组件中去传递事件的时候，这些其实是提升了一个等级，然后去把它缓存起来，这样，在重复创建组件的时候，方法不会重复实例化，这样就会优化内存的使用。
5.hoistStatic（静态提升）自动针对多静态节点进行优化，输出字符串
6.按需加载

静态node不会做更新处理，着重注意的是注释（hint）部分，当节点多了之后，会编译成一个静态字符串。

都是在前端完成不是服务器端完成的，这样的好处是提升了js的处理速度。着眼于需要处理的动态内容，提升性能。减少创建对象的数量，减少内存的占用。

五、compiler总结

1.virtua DOM机制调整
2.内存优化，更少的占用
3.按需加载，更灵活的组件化