搜索

解锁 vue3.0 你不得不知道的新东西

程序源代码

共 2193字，需浏览 5分钟

 ·

2021-12-09 18:20

现在技术发展的太过迅速，一不学习就落后，前端也是如此。前端今年最要关注的就是 Vue3.0 的发布，现在已经进入了RC 阶段，很快就要发布 正式版 了。

性能方面

通过更新 runtime-core 与 runtime-dom ，支持了包括 Fragments、Portals与Suspense w/ async setup()等（似乎有点越来越像 react），支持 Composition API 、Options API 和 typings，配合 Proxy 的引入，极大程度上提高了响应式的能力。

vue2初始化，所有的数据都要走defineProperty；vue3用proxy动态的决定返回什么，做了拦截，初始工作量减少，组件实例化速度的提升还是很明显的。

runtime-core 体积压缩成了约10kb

维护性

代码迁移成 TypeScript （还没学的抓紧啦）

编译器Compiler优化，以下借用尤大大的特性更新图翻译一下：

  • 使用模块化架构
  • 优化 "Block tree"
  • 更激进的 static tree hoisting 功能
  • 支持 Source map
  • 内置标识符前缀（又名 "stripWith"）
  • 内置整齐打印功能

编译优化：template compile to render function阶段可以借助vue-loader在webpack编译阶段离线完成 那么耗时更多的patch阶段优化：通过编译阶段对静态模版的分析，编译生成Block Tree,只把绑定数据的动态节点加入嵌套区块数据，每个区块以数组追踪

Composition API

尤大大说以前在2点几的版本中我们使用 mixin 来混入公用方法或者其它内容，这样做混入的对象来源不明，相同功能代码陈列杂乱，修改起来上翻下翻，对开发者造成困扰。

而使用 Composition API，来源明确、相同功能的代码块在一起，修改的时候只需要专注一个地方，更易于维护。

以前我们在代码里都是使用 this 来访问属性，比如 this.foo() this.obj this.$watch，这样 vue 对外暴露的东西太多，引入第三方组件安全问题无法保障，造成困扰。vue3 之后我们将不再使用 this，api 以模块的方式引入，函数的方式使用。

CSS Modules

CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS 的替代方案。

先在组件中的