Vue3.0来了,一分钟快速了解3.0新特性
10月5日,尤大大带着pre-alpha版本的Vue3.0走来了。粗略看了一下源码,发现源码基本都转化成了 typeScript 。我们对照着“ Vue 3.0 Updates ” 的主题演讲来分析一下:1、速度方面:通过更新 runtime-core 与 runtime-dom ,支持了包括 Fragments、Portals与Suspense w/ async setup...
10月5日,尤大大带着pre-alpha版本的Vue3.0走来了。
粗略看了一下源码,发现源码基本都转化成了 typeScript 。
我们对照着 “ Vue 3.0 Updates ” 的主题演讲来分析一下:
1、速度方面:
通过更新 runtime-core 与 runtime-dom ,支持了包括 Fragments、Portals与Suspense w/ async setup() 等(似乎有点越来越像 react),支持 Composition API 、Options API 和 typings,配合 Proxy 的引入,极大程度上提高了响应式的能力。
Composition API 与 Proxy 的运用使得组件化更加灵活,逻辑业务组件的编写与UI组件的多样化能够更好的实现。
2、体积方面:
runtime-core 体积压缩成了 约10kb
3、维护性:
代码迁移成 TypeScript (还没学的抓紧啦)
编译器(Compiler)优化,以下借用尤大大的特性更新图翻译一下:
使用模块化架构
优化 "Block tree"
更激进的 static tree hoisting 功能
支持 Source map
内置标识符前缀(又名 "stripWith")
内置整齐打印功能
移除 source map 和标识符前缀功能后,使用 Brotli 压缩的浏览器版本精简了大约 10KB
可见,编译器更多从数据结构入手,优化架构层级,降低使用成本。
4、更接近原生开发
5、让你更轻松开发
其次是 GitHub 上的源码目录:
- reactivity 目录:数据响应式系统,主要使用 Proxy。
- runtime-core 目录:支持 v-dom 与 Vue 原生的各种 API 在浏览器上的调用,调用 Vue 特性的相关代码。
- runtime-dom 目录: 调用各类浏览器原生 DOM 事件的相关代码。
- runtime-test 目录: 测试用的runtime的相关代码。
- server-renderer 目录: SSR 相关代码。
- compiler-core 目录: 支持 Vue 原生编写的 编译器特性,以及开发者编写的编译器特性的相关代码。
- compiler-dom 目录: 调用浏览器的编译器的相关代码。
- shared 目录: 无内置API。
- vue 目录: 实现 vue 构建与编译的相关代码。
更多推荐
所有评论(0)