Vue 3.0 源码发布都有哪些要学的?

当大多数国人还在庆祝国庆节的时候,尤雨溪大大在昨天凌晨发布了 Vue 3.0 源代码,源码地址:https://github.com/vuejs/vue-next 。虽然目前还 处于 Pre-Alpha 版本,但是可以预见后面的 Alpha、Beta 等版本应该不会太遥远。
在这里插入图片描述
之前,就有预言,除了性能优化、脚手架和新功能外,TypeScript绝对是一个重点,因此,在Vue 3.0源代码版本中,98%代码由Typescript编写,相信后面会是100%。

通过本次发布的源代码可以了解到针对 Vue 3 计划并已实现的主要架构改进和新功能。

1, 编译器

在这里插入图片描述
编译器(Compiler)的优化主要在体现在以下几个方面:

  • 使用模块化架构
  • 优化 “Block tree”
  • 更激进的 static tree hoisting 功能
  • 支持 Source map
  • 内置标识符前缀(又名 “stripWith”)
  • 内置整齐打印(pretty-printing)功能
  • 移除 source map 和标识符前缀功能后,使用 Brotli 压缩的浏览器版本精简了大约 10KB

2,运行时

在这里插入图片描述
运行时(Runtime)的更新主要体现在以下几个方面:

  • 速度显著提升
  • 同时支持 Composition API 和 Options API,以及 typings
  • 基于 Proxy 实现的数据变更检测
  • 支持 Fragments
  • 支持 Portals
  • 支持 Suspense w/ async setup()

3,2.x 功能迁移

在这里插入图片描述
最后,还有一些 2.x 的功能尚未移植过来,如下:

  • 服务器端渲染
  • keep-alive
  • transition
  • Compiler DOM-specific transforms
  • v-on DOM 修饰符
    v-model
    v-text
    v-pre
    v-onc
    v-html
    v-show

此外,目前发布的 Pre-Alpha 版本打包后的代码是 ES2015+,尚未支持 IE11。

4,项目结构

代码仓库中有个 packages 目录,里面主要是 Vue 3 的主要功能实现。

  • reactivity 目录:数据响应式系统,这是一个单独的系统,可以与任何框架配合使用。
  • runtime-core 目录:与平台无关的运行时。其实现的功能有虚拟 DOM 渲染器、Vue 组件和 Vue 的各种API,我们可以利用这个 runtime 实现针对某个具体平台的高阶 runtime,比如自定义渲染器。
  • runtime-dom 目录: 针对浏览器的 runtime。其功能包括处理原生 DOM API、DOM 事件和 DOM 属性等。
  • runtime-test 目录: 一个专门为了测试而写的轻量级 runtime。由于这个 rumtime 「渲染」出的 DOM 树其实是一个 JS 对象,所以这个 runtime 可以用在所有 JS 环境里。你可以用它来测试渲染是否正确。它还可以用于序列化 DOM、触发 DOM 事件,以及记录某次更新中的 DOM 操作。
  • server-renderer 目录: 用于 SSR,尚未实现。
  • compiler-core 目录: 平台无关的编译器,它既包含可扩展的基础功能,也包含所有平台无关的插件。
  • compiler-dom 目录: 针对浏览器的编译器。
  • shared 目录: 没有暴露任何 API,主要包含了一些平台无关的内部帮助方法。
  • vue 目录: 用于构建「完整」版本,引用了上面提到的 runtime 和 compiler目录。

参考:

https://juejin.im/post/5d977f47e51d4578453274b3
https://github.com/vuejs/vue-next

发布了109 篇原创文章 · 获赞 91 · 访问量 33万+

猜你喜欢

转载自blog.csdn.net/qq_36410795/article/details/102400042