VUE-3-新特性学习

30次阅读

共计 858 个字符,预计需要花费 3 分钟才能阅读完成。

首先先介绍一下所有框架的终极目标:

  • 更快
  • 更小
  • 更容易维护
  • 更加友好
  • 更容易使用
关于更快:

1. 虚拟 DOM 重写
虚拟 DOM 从头开始重写,我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。

2. 优化 slots 的生成
目前在 Vue 中,当父组件重新渲染时,其子组件也必须重新渲染。使用 Vue 3,可以单独重新渲染父级和子级。

3. 静态树提升 (Static Tree Hoisting)
使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态的,然后将其提升,从而降低了渲染成本。它将能够跳过 patching 整棵树。

4. 静态属性提升
此外,我们可以期待静态属性提升,其中 Vue 3 将跳过不会改变的 patching 节点。

5. 基于 Proxy 的 Observation(划重点)
目前,Vue 的响应式系统是使用带有 Object.defineProperty 的 getter 和 setter。但是,Vue 3 将使用 ES2015 Proxy 作为其观察机制。这消除了以前存在的警告,使速度加倍,并使用了一半的内存。
PS: 为了继续支持 IE11,Vue 3 将发布一个支持旧观察机制和新代理版本的构建。

使其更具可维护性

虽然大多数 Vue 开发人员都没有在库本身上工作,但很高兴知道 Vue 3 将带来更可维护的源代码。它不仅会使用 TypeScript,而且 许多包将被解耦,使所有内容更加模块化。

更容易与原生结合

运行时核心也将与平台无关,使得 Vue 可以更容易地与任何平台(例如 Web,iOS 或 Android)一起使用。

特别指出

1.Vue 3.0 还具有改进的 TypeScript 支持,允许在编辑器中进行新级别的类型检查和有用的错误和警告。

2.Observer 模块已被解压缩到自己的包中,允许您以新的方式使用它:

3.Hooks API
当我们需要在 Vue 中共享两个组件之间的行为时,我们通常使用 Mixins。然而尤大正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题,并且更适合使用惯用的 Vue 代码。
这个可以期待一下,据说隔壁 react 可以不用使用 class

正文完
 0