Vue3.0新特性，编译原理

前言

历时两年，37次提案，2682次提交。

628次的Pull Request，99个代码贡献者

再加上无数支持Vue的小伙伴们

2020年9月18号，发布Vue3正式版Vue3.0.0，命名为One Piece

Vue3.0带来的变化

1.性能提升1.3~2x

与Vue2.x相比，mount挂载50%提升，内存占用小120%

核心代码 Composition API 13.5kb，最小11.75kb

所有Runtime：22.2kb（Vue2是32kb）

为什么有这么大的性能提升呢？

1.compiler原理篇

优化案例1：

1. 静态Node不再作更新处理（hoistStatic =》SSR优化）
2. 静态绑定的class，id不再作更新处理
3. 结合打包标记PatchFlag，进行更新分析（动态绑定）

优化案例2：

事件监听器Cache缓存处理（cacheHandlers）

hoistStatic自动针对多静态节点进行优化，输出字符串

可以通过 Vue Template Explorer 演示，查看源码，了解到 compiler 原理

Vue Template Explorer

左侧写Vue的语法，右侧编译器

2.TS支持，新增Fragment，Teleport，Suspense

新增功能

1. Fragment -- 不受根节点限制，渲染函数可接受Array
2. Teleport -- 类似Portal，随用随取，e.g.弹窗，Actions
3. Suspense -- 嵌套的异步依赖，e.g.async setup()

3.按需加载，配合vite 组合API

相关资料

官方文档

组合式API

Composition API官网地址

为什么要用Composition API？

1.Vue2对于复杂逻辑组件，在后期变得无法维护

Options API

逻辑被拆分成：

components

props

data

computed

methods

生命周期的方法

反观Composition API

语法更加贴近自然语言，采用函数式的编程

2.Vue2中代码复用方法，如：Mixin，Filters都有缺陷

1. Mixin（命名空间冲突，逻辑不清晰，不易复用）
2. scoped slot作用域插槽（配置项多，代码分裂，性能差）

3.Vue2对TS支持不充分

Vue3中Composition API的优点

1.复杂组件逻辑进行分离

2.组件间逻辑共享

组合式API