vue3.0原理 —— complier

一、为什么要用vue3.0

vue3.0原理 —— complier_第1张图片
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.按需加载
vue3.0原理 —— complier_第2张图片
vue3.0原理 —— complier_第3张图片
静态node不会做更新处理,着重注意的是注释(hint)部分,当节点多了之后,会编译成一个静态字符串。
vue3.0原理 —— complier_第4张图片
都是在前端完成不是服务器端完成的,这样的好处是提升了js的处理速度。着眼于需要处理的动态内容,提升性能。减少创建对象的数量,减少内存的占用。

五、compiler总结

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

你可能感兴趣的:(vue3.0.js,前端,javascript,typescript)