3-12:Vue3.2 响应式优化对应用层的改变

415 阅读2分钟

3-12:Vue3.2 响应式优化对应用层的改变

在处理好了 SvgIcon 图标之后,接下来我们就需要处理登陆页面的逻辑问题了。不过在处理这个逻辑之前,我们需要先来明确一点 vue3 新的更新内容。

如果大家之前有过了解 Vue3 代码的话,那么会知道 Vue3 中声明响应式数据的方式有两种:

  1. ref
  2. reactive

对于这两种使用方式而言,它们在应用层上并没有明确的界限,也就是说我们可能很难仅通过官网的介绍来判断我应该在什么情况下使用什么。

但是这种情况在现在已经不存在了。

2020年10月29日,社区大佬 basvanmeurs 提出了一个新的 PR,大概的意思是说:他重构了响应式的部分内容,大大增加了性能。

详细的介绍如下:

  • Big runtime performance improvement for ref, computed, watch and watchEffect (30%-80% depending on the amount of dependencies)
  • Memory usage decreased by about 30% when creating ref, computed, watch and watchEffect
  • Creation time performance improvement, most notably for watchers and watchEffects

ref、calculated、watch 和 watchEffect 的运行时性能大幅提升(30%-80% 取决于依赖项的数量) 创建 ref、calculated、watch 和 watchEffect 时内存使用量减少了约 30% 创建时间性能改进,最显著的是 watchers 和 watchEffects

这是一个非常强大的变化,同时又因为这个变化过于庞大,所以一直等待到 2021年8月5日 伴随着 vue 3.2发布,尤大才合并对应的代码,并在这次变化中对该性能改进进行了如下的介绍:


更高效的 ref 实现(约 260% 的读取速度/约 50% 的写入速度) 依赖项跟踪速度提高约 40% 内存使用量减少约 17%

毫无疑问,这绝对是一个伟大的变化。

那么针对于这个变化,在应用层中最大的体现就是 ref 这个 API ,性能得到了大幅度的提升。

所以说,拥抱新的变化吧!

在之后能使用 ref 的地方就使用 ref 吧。毕竟现在它的性能得到了大幅的提升!

那么在咱们之后的代码中,我们同样也会全部使用 ref 来作为响应式数据构建的方式,无论是 基本数据类型 或者是 复杂数据类型, 毕竟这样做本身并没有什么问题,对不对?