对vue3新特性
的了解:(性能提升
,维护性问题
, 独立的响应化模块
,componsitionAPI
)
vue3.0的改进主要体现在:运行速度,打包体积,维护性,友好性,跨平台性,易用性
-
速度更快(运行速度)
- 虚拟
dom
的重写 - 优化
slots
的生成 - 静态树的提升
- 静态属性的提升
- 基于
Proxy
的响应式系统- 使用
Proxy
代替Object.defineProperty
- 使用
- 虚拟
-
体积更小:
- 通过摇树优化核心库体积
tree-sharking
:最早由rollup
实现,是一种通过删除冗余代码,优化代码体积的的技术,保证打包后的代码体积最小,专业术语叫做Dead Code Elimination
-
更易于维护:Typescript+模块化
-
更加友好
- 跨平台太太:编译器核心和运营是核心平台我i管,是的
vue
更容易与任何平台(web
、android
、ios
)一起使用
- 跨平台太太:编译器核心和运营是核心平台我i管,是的
-
更容易使用
- 改进的
Typescript
支持,编辑器能提供强有力的类型检测
和错误警告
- 更好的调试支持
- 独立的响应化模块
ComponsitionAPI
:类似于react的hooks(逻辑复用)
- 改进的
虚拟dom的重写
- 期待更多的编译时,提示来减少运行时开销,使用更有效的代码来创建虚拟节点
- 组件快速路径+单个调用+子节点类型检测
- 跳过不必要的条件分支
- js引擎更容易优化
优化solts生成
- vue3中可以单独重新渲染父级和子级
- 确保实例正确的跟踪依赖关系
- 避免不必要的足迹组件重新渲染
静态树的提升(Static Tree Hosting)
- 使用静态树提升,这意味着vue3的编译器能够检测到什么是静态的,然后将其提升,从而降低渲染成本
- 跳过修补整个树,从而降低渲染成本
- 即使多次出线也能正常工作
静态属性提升
- 使用静态属性提升,vue3打补丁时,跳过这些属性不会改变的节点
基于Proxy的数据响应式
- vue2的响应式系统使用Object.defineProperty的getter和setter,vue3将使用ES2015 Proxy作为其管擦机制,这将会带来如下变化:
- 组件实例初始化速度提升100%
- 使用Proxy节省以前一般的内存开销,加快速度,但是低浏览器版本不兼容
- 为了继续支持IE11,Vue3将发布一个旧观察者机制和新Proxy版本的构建
高可维护性
- vue3将来带来更可维护的源代码,它不仅会使用typeScript,而且许多报备解耦,更加模块化