阅读 305

Vue3.0新特性及带来的性能”核变“

前言

Vue3.0也发布了有一段时间了,尤大今年四月份也开了直播介绍了Vue3.0的能力,最近沉下来学习了解了新特性,个人感觉Vue3.0还是非常强大的,我选了Vue3.0的绝对核心亮点来介绍,分别是本节的内容:性能和组合式Api。

Performance

PatchFlag

在之前的VDOM中,如果msg值发生改变,整个模版中的所有元素都需要重新渲染。但在Vue3.0中,在这个模版编译时,编译器会在动态标签末尾加上 /* Text*/ PatchFlag。只有带patchFlag 的 VNode 才被认为是动态的元素,会被追踪属性的修改。

每一个Block中的节点,就算很深,也是直接跟Block一层绑定的,可以直接跳转到动态节点而不需要逐个逐层遍历。

hoistStatic 静态节点提升

当使用hoistStatic时,所有静态的节点都被提升到render方法之外。这意味着,他们只会在应用启动的时候被创建一次,而后随着每次的渲染被不停的复用。

在大型应用中,对于内存优化是非常明显的。

SSR 服务端渲染

当开启SSR了之后,如果我们模版中有一些静态标签,这些静态标签会被直接转化成文本。

其中的动态绑定依然是一个单独的字符串内嵌进去。这个性能肯定比React 转成VDOM在转为为HTML快很多。

StaticNode 静态节点

刚才提到在SSR中静态的节点会被转化为纯字符串。如果在客户端,当静态节点嵌套足够多的时候,VUE编译器也会将VDOM转化为纯字符串的HTML。

通过这些操作,可以看到和vue2.x相比,浏览器的核心性能指标都有了很大的提升。

性能总结

Vue3.0性能如此卓越的核心在于”动静分离“,静动比越大,性能提高的更明显;在项目中,静动比往往比我们想象的更大,Vue3.0带来的性能提升绝对是”核变“级的。

Composition API

上面所说的性能,对于我们在实际开发中是不易感知到的,而组合式Api是我们之后开发过程中一定会遇到的。

随着Vue组件的增大,组件内代码变得越来越难以理解和维护。其中的一些可以复用的代码很难被抽离出来。在Vue2中,逻辑概念(功能)被管理在组件中,但是功能和组件并不是一对一关系。一个功能可以被多个组件使用同时一个组件可以有多个功能。在Vue中,一个功能可能需要依赖多个Options(components、props、data、computed、methods及生命周期方法)。

当我们在组件间提取并复用逻辑时,组合式Api是十分灵活的。一个组合函数仅依赖它的参数和Vue全局导出的Api,而不是依赖其微妙的 this 上下文,你可以将组件内的任一一段逻辑导出为函数以复用它。

核心Api

  • reactive
  • ref
  • computed
  • readonly
  • watchEffect
  • watch

小结

本来想简单介绍下组合式Api,但发现无非是从官方搬过来而已,感兴趣的移步下方链接。

目前Vue3.0考虑兼容性,还是支持Options Api的,组合式Api提供了更好的逻辑组合能力,使得上限增高了

拓展链接

vue3js.cn/vue-composi…

www.bilibili.com/video/BV1Tg…

文章分类
前端
文章标签