Vue 3 对 Web 应用性能的改进

时间: 2019-10-07阅读: 40标签: vue3

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色。 尤雨溪将 Vue 3 的目标描述为:

  • 使其更快
  • 使其更小
  • 使其更易于维护
  • 使其更容易定位到本地
  • 你的生活更轻松

通过查看 RFC 并进行交谈,我确信上述所有目标都会毫无问题地实现。在本文中,就其影响和可能性而言,我将讨论一些对我来说最有趣的更改。


性能优化

作为性能怪胎,在探究某些 API 之前我想先谈一谈 Vue 3 的性能。

先从 Vue 3 的捆绑包大小开始。

当前最小化并被压缩的 Vue 运行时大小约为 20kB(2.6.10 版为 22.8kB)。 Vue 3捆绑包的大小估计大约会减少一半,即只有大约 10kB!


全局 API tree-shaking

诸如更好的模块化之类的许多其他优化之上,Vue 3 源代码将是 tree-shakeable。这意味着,如果你用不到它的某些功能的话(例如 component 或 v-show 指令),则这些功能将不会包含在你的产品包中。目前无论我们使用 Vue 核心的什么功能,这些功能最终都会在我们的生产代码中使用,因为 Vue 实例作为单个对象被导出,并且捆绑程序无法检测到该对象的哪些属性在代码中使用。

 // Vue 2.x - whole `Vue` object is bundled for production 
import Vue from 'vue'

Vue.nextTick(() => {})
const obj =  Vue.observable({})

为了使全局 API 可以 tree-shake,Vue 团队决定对其中的大多数 API 通过命名导出,以便捆绑程序可以检测和删除未使用的代码:

 // Vue 3.x - only imported properties are bundled
import { nextTick, observable } from 'vue'

nextTick(() => {})
const obj = observable({})

这是一个重大变化,因为现在通过命名的导出才能使用只能以前的全局 API。这个更改将会影响:

  • Vue.nextTick
  • Vue.observable
  • Vue.version
  • Vue.compile (只限于完整版本)
  • Vue.set (仅在2.x兼容版本中,你会很快找到原因)
  • Vue.delete (与上面相同)

我们还需要一段时间才能完全受益于此功能,因为它需要在生态系统中采用。 Vue 团队将发布兼容性版本,因此我们应该能够使用也使用旧的 API 插件,但会降低性能。

可以 tree-shake 的 JavaScript API 不止一个。在后台,Vue 编译器(将 Vue 模板转换为渲染功能的工具)将检测模板中使用的指令,并对其进行 tree-shake。例如下面的模板:

<transition>
  <div v-show="ok">hello</div>
</transition>

在被 Vue 编译器处理后,看起来是这样的:

import { h, Transition, applyDirectives, vShow } from 'vue'

export function render() {
  return h(Transition, [
    applyDirectives(h('div', 'hello'), this, [vShow, this.ok])
  ])
}

每个人都会从全局 API tree-shaking 中受益(尤其是我们的用户),但是我认为制作小型的轻量级网站并仅使用 Vue 功能子集进行交互的人(最能替代 jQuery 之类的库)的人会对此最为重视。


基于代理的响应性

尽管捆绑包的大小可能会严重影响应用的加载时间,但是在下载后,它也应该能够快渲染且运行流畅。

Vue 核心团队非常了解这一点,这就是为什么在运行时性能上也有很大改进的原因。

让我们从最具影响力的一种系统开始,它基于 JavaScript Proxies。当前的 Vue 响应系统是基于 Object.defineProperty的,有一些局限性。最常见并令人沮丧的是 Vue 无法跟踪响应对象的属性添加和删除。为此我们需要使用 Vue.set 和 Vue.delete 来保持响应系统的正常运行。通过使用 JS Proxies,我们终于可以摆脱这种丑陋的解决方法了。

// Adding a new property to reacitve object in Vue 2.x
Vue.set(this.myObject, key, value) 
// Adding a new property to reactive object in Vue 3
this.myObject[key] = value

代理的真正影响可以进行更快的组件初始化和修补。 根据测试,速度大约快 2 倍!


这种改进尤为重要,因为 Vue 必须使用 getters/setters 来递归地遍历所有对象及其属性,并对其进行转换。通过使用代理,这个过程就变得容易得多。

值得一提的是,由于使用了 JS Proxies, Vue 3 将会放弃对 Internet Explorer(而不是Edge)的支持,但是请放心,对于希望支持 IE 的用户来说,它会保持兼容性。


时间切片

根据尤雨溪的推文,此功能不会包含在 Vue 3 中。

Vue 3 另一个令人兴奋的性能功能是对时间切片的实验性支持,但是它很少被提及。

用一个比喻来解释什么是时间切片。想象有一条买冰淇淋的队伍,它非常的长。因为那是镇上最好的冰淇淋,人们一个接一个的去买。由于某种原因,没有关于可用口味的信息。要得到这个信息,你需要询问直接出售冰淇淋的女士。

在这种情况下,我们可能最终会得到 2 条记录——其中一条给想要购买冰淇淋的人(说服他们耐心等待),另一条给希望在选择之前了解更多口味信息的人,我们应该尽快获得这个信息。不幸的是,只有一位女士在卖冰淇淋,她在为“主”线上的所有客户提供服务之前不会回答任何问题。

对于尚未被说服的客户来说,这并不是最好的体验,大多数人可能会发现这不值得等待。为了解决这个问题,女士可以在每 2 至 3 个服务对象中回答一个问题。两组都应该对此解决方案感到满意。

这正是 CPU 与 Web 应用一起工作的方式。我们有一条“主”队列(称为“主线程”),需要完成其所有主要任务(脚本、渲染等),然后才能响应用户交互。对于某些页面,这可能会导致非常糟糕的用户体验,具体取决于 Vue 组件加载或重新渲染所需的时间。

为了使其更可靠,最好对此脚本进行评估并“切”成段,在每次执行后查看是否有用户输入要处理。这样,无论需要进行多少次渲染或重新渲染,程序都将保持响应状态。这就是在 Vue 3 中的工作方式。

这是尤雨溪在 Vue 3 中展示时间分片功能的方式。请注意脚本执行时间轴中的小间隙,可以在这些间隙中处理用户输入。


能够轻松识别为什么重新渲染组件的能力

工具与开箱即用的性能同等重要。所以我们可以在 Vue 3 中看到一个新的生命周期 hook ——renderTriggered。可以用它来跟踪和消除不必要的组件重新渲染,当把它与时间切片结合使用时,就成了在运行时性能优化中非常强大的武器。

const Component = {
  // other properties
  renderTriggered (event) {
     console.log(`Re-render of ` + this.$options.name + ` component`, event)
  }
}


还有什么

除了上面在 Vue 3 中看到的内容以外,还有很多东西,但是这些可能是影响最大的。许多未提及的改进将会隐藏在 Vue 编译器生成的代码中,或者与实现细节和算法绑定在一起

但是,有几项改进值得一提:

  • 输出代码将更易于针对 JavaScript 编译器进行优化
  • 输出代码通常会更好地进行优化
  • 由于改进了补丁算法,将避免不必要的 parent/children 重新渲染

另外,在未来几天里,你可以期待尤雨溪撰写的一篇深入的文章,介绍他们专门针对 Vue 编译器进行的性能优化。


摘要

尽管 Vue 已经成为目前性能最好的框架之一,但我们仍然将会在第三版中看到重大改进。特别是在捆绑包大小和运行时性能方面。还进行了无数的微优化。我认为 Vue 3 非常适合现代移动优先和性能导向的 web。

别忘了 Vue 是唯一由社区完全驱动的主要框架。本文中列出的所有更改都以 RFC 的形式在此处与社区一起讨论。你可以帮助核心团队,你可以表达对有效 RFC 的意见,甚至可以提出自己的改进建议。让我们一起使 Vue 更好!

作者:Filip Rakowski
翻译:疯狂的技术宅
原文:https://vueschool.io/articles/vuejs-tutorials/faster-web-applications-with-vue-3/


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/6293

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全