Vue3新特性

Vue3新特性1-性能提升

Vue3相对Vue2性能提升了很多，为什么能做到性能提升呢？

1. 静态内容不再作更新处理

   • 静态node不再作更新处理（hoistStatic -> SSR优化）
   • 静态绑定的class，id不再作更新处理
   • hoistStatic自动针对多静态节点进行优化，输出字符串

如何做到的呢：template编译成语法树的时候，会给动态的内容打包标记patchFlag，再进行更新处理。根据patchFlag看哪些是动态的内容，着眼于动态的内容，静态的内容则不再作更新处理，且如果静态内容很多的话，还会给静态内容做优化

- 事件监听器Cache缓存处理（CacheHandlers），减少创建对象数量，优化内存
复制代码

- 按需加载，官方把api封装成了一个一个的函数，当需要使用到的时候再自动加载进来
复制代码

Vue3新特性2-支持Ts，新增功能Fragment,Teleport，Suspense

支持Ts，新增Fragment,Teleport，Suspense

Vue3新特性3-按需加载（配合vite）& 组合API

为什么用Compisition API

原因一：Vue2对于复杂逻辑组件，后期变得很难维护

逻辑被拆分为components，data，methods… 相关逻辑字段在methods和data等中互相隔离

原因二：Vue2代码复用方法，如Minxin，filter，插槽都有缺陷

Minxin

• 命名空间冲突- 如果在Minxin中已经定义了一个变量，在引入Minxin的组件Data中又定义了同一个变量名，则会优先使用data中定义的变量
• 逻辑不清晰，引入Minxin之后，不易查看相关逻辑
• 不易复用，Minxin中定义的方法，不太易复用

scoped slot作用域插槽

• 配置项多
• 代码分裂
• 性能差

原因三：Vue2对Ts支持不充分

总结

使用compisitionAPI 复杂组件逻辑可以分离，组件间逻辑也能共享

Vue3变化

• 组合式API+函数式编程
• 组件间逻辑共享
• Vite 轻量、比较快