宫若石
宫若石

vue3的相关知识点归纳

Topic：Vue3的设计与改变

Vue3发展历程

  1. 2018/09/30：尤雨溪在medium个人博客上发布了 Vue 3.0 的开发路线
  2. 2019年初：采用了RFC（征求意见）流程
  3. 2019/10/05：Vue 3 源码开放（pre-alpha状态）
  4. 2020/04/17：Vue 3.0 beta
  5. 2020/05/28：发表文章「Vue 3 设计过程」
  6. 2020/07/18：Vue 3.0 RC
  7. 2020/09/18：Vue 3.0 “One Piece"

Vue3的核心设计与提升

响应式核心原理：Object.defineProperty 切换到 Proxy

  • 可检测到新的属性添加
  • 支持 Map、Set、WeakMap 和 WeakSet
  • 提供更好的性能
    • Proxy 作为浏览器的新标准，性能上是一定会得到厂商的大力优化的
    • 不需要像Vue2那样递归对所有的子数据进行响应式定义，而是再获取到深层数据的时候再去利用reactive进一步定义响应式，这对于大量数据的初始化场景来说收益会非常大

Vue Composition API

  • 旨在解决大规模应用场景中的痛点
  • 更灵活的逻辑组织模式（如逻辑提取与复用）
  • 更为可靠的类型推断能力

Vue3代码库完全使用typescript编写

  • 已支持对模板表达式和 props 的类型检查
  • 已全面支持 TSX

内部模块解耦（采用monorepo）
模块之间的依赖关系更加明确, 降低项目贡献壁垒并提高其长期可维护性

内部包有自己的单独API，类型定义和测试
解锁高级用法
编译器支持自定义AST转换，用于在构建时自定义（如，在构建时进行i18n操作）
核心运行时提供了一系列 API，用于针对不同渲染目标（如native moile、WebGL或终端）的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。
@vue/reactivity 模块——Vue响应式系统；可作为独立包进行使用。也可以与其他模块解决方案配对使用（如 lit-html），甚至是在非 UI 场景中使用。

性能提升

  • bundle包大小方面（tree-shaking 减少了 41% 的体积）
  • 初始渲染速度方面（快了 55%）
  • 更新速度方面（快了 133%）
  • 内存占用方面（减少了 54%）

实验特性