vue3新特性

对vue3新特性的了解：（性能提升，维护性问题， 独立的响应化模块，componsitionAPI）

vue3.0的改进主要体现在：运行速度，打包体积，维护性，友好性，跨平台性，易用性

• 速度更快(运行速度)

  • 虚拟dom的重写
  • 优化slots的生成
  • 静态树的提升
  • 静态属性的提升
  • 基于Proxy的响应式系统
    • 使用Proxy代替Object.defineProperty

• 体积更小：

  • 通过摇树优化核心库体积
  • tree-sharking：最早由rollup实现，是一种通过删除冗余代码，优化代码体积的的技术，保证打包后的代码体积最小，专业术语叫做 Dead Code Elimination

• 更易于维护：Typescript+模块化

• 更加友好

  • 跨平台太太：编译器核心和运营是核心平台我i管，是的vue更容易与任何平台（web、android、ios）一起使用

• 更容易使用

  • 改进的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,而且许多报备解耦，更加模块化