5 种极其简单的方法来大幅提高 VueJS 应用的速度

简单介绍一下背景：我叫 Vaibhav，来自 Five2One。我参与 VueJS 项目已有两年（自 1.0 发布以来），并参与构建/培训了悉尼最大的三个 VueJS 代码库。这些代码服务于数百万人，所以我的工作不仅仅是构建可扩展的代码模式，实际上也非常注重性能。

通常看到小型启动项目和代码库，目标是推出代码并快速将产品交付给客户，这是我们擅长的 - 您可以在 five2one.com.au 查看我们的工作，但除此之外，作为工程师，我们的目标是关注性能和可扩展性。

让我们直接进入正题——讨论一些可以提高 VueJS 应用程序性能的简单方法。

数字 1

这里我们有一个“函数式”模板，它没有声明状态，只处理 props。使用 render 方法可以轻松将其创建为基于 Vue 的函数式组件。https: //vuejs.org/v2/guide/render-function.html

如果你仔细阅读，你会看到 props 被传递并调用functional: true

因此，下面是该解决方案的简单修复方法

就这么简单，您不需要担心更改模板语法，您可以坚持使用它并仍然享受 Vue 语法的奢华。

快速编辑：因为它是一个功能组件，所以 this 的上下文不存在，所以要访问 props，你需要执行 props.name — 感谢 Dinesh Madhanlal 的提及

第二个简单提示

对动态加载的组件使用 keep-alive。

有时我们会使用 Vue 提供的 prop 动态加载组件is，并且可能会在动态加载的组件之间切换。为了保持状态并避免在切换组件时重新加载数据，DOMless 包装器是一个很好的解决方案，可以加快加载速度。

第三个简单提示

考虑到 Vue 的 vDOM 系统是如何运作的，这一点对大多数人来说可能更显而易见。vDOM 的目标是充当中间更新媒介，并（非常高效地）跟踪项目 UI 的独立更改，并触发针对这些目标组件的独立重新渲染，而不是真正地重新绘制整个屏幕。

很多时候，我们可能会创建一个带有包装器的组件，该包装器会频繁重新渲染，而同一模板的其他部分在模板其他部分重新渲染时也需要做大量的工作。一个简单的解决方法就是将文件组件化。除非子组件在数据方面依赖于父组件，否则它应该可以正常运行。

第四个简单提示

在 CTA 事件中使用匿名函数。每当将匿名函数传递给按钮的“onClick”方法时，我都会在 React 开发者中看到这种模式，因为这是在 React 中将自定义数据传递给函数的方式之一，所以最好不要传递匿名函数。原因就在于此。

以下面这个例子为例

这里发生的情况是，每当 div 的长度增加（一个简单的进度条）时，所有按钮也会重新渲染。
严格来说，它们不应该重新渲染，因为它们本身没有任何变化，对吧？没有 props 更新，也没有数据更新等等。

这就是快速捕获，JS 与内存中的匿名函数交互，即每次重新渲染时，都会创建匿名函数的新实例，并且差异算法会将其作为新道具，因此即使不需要也会重新渲染按钮。

幸运的是，Vue 非常神奇，它足够智能，能够理解任何自调用函数都不应被调用，直到它所附加的事件被触发，所以即使它是一个 IIF，Vue 也会使其成为一个 thunk，从而延迟执行。

如果您想要更安全，总是值得创建一个返回另一个函数的闭包，因此包装函数只有一个实例并且不会导致重新渲染。

神奇的第 5 个简单技巧

这也是一个简单的方法，虽然存在一些灰色地带，但并非万能的解决方案。仅当页面上有大量附属内容且组件切换显示速度很快时才使用此方法。

是的，我说的是 v-if 或 v-show 的使用。两者之间有很大区别。如果 v-if = false，则永远不会渲染其指令所属的组件。因此，如果该组件在短时间内被多次切换，就会影响性能，所以在这种情况下使用 v-show 效果非常好。

然而，问题在于，如果你将 v-show 添加到组件，而该组件需要对其first time渲染的内容进行繁重的操作，那么无论 v-show 是 true 还是 false，该操作都会执行。因此，值得使用 v-if 将其延迟到真正需要该组件时再执行。记住，v-show 只会将组件的 CSS 显示值设置为 display: none，组件仍然处于“渲染”状态。

然而，即使这个组件的初始负载很重，如果它持续切换，并且每次都需要执行该方法，那么最好使用 v-show。一切都取决于用户的需求。

我希望这对大家有帮助！

如果你喜欢这个，一定要关注我以获取类似的东西：

推特： twitter.com/ @veebuv
领英： linkedin.com/in/vaibhavnamburi
instagram：_veebuv