你好 本文的翻译是专为下周开始
的JavaScript开发人员课程的学生准备的。
崔的声音关于我的一些事-我的名字叫Vaibhav，我来自Five2One。 从1.0版本发布以来，我已经从事VueJS整整两年了，基本上帮助创建/训练了悉尼最大的3个VueJS代码库。 该代码可为数以百万计的人提供服务，因此我的任务不仅是创建可伸缩的代码模式，而且还要在很大程度上照顾其性能。
您通常会看到，小型初创公司和代码库的定位是快速将代码推向市场，并将产品交付给客户，我们已经成功了-您可以在Five2one.com.au网站上评估我们的工作，但除此之外，工程师，我们的目标是关心性能和可伸缩性。
让我们直接讲一下-讨论一些改善VueJS应用程序性能的简单方法。
一号
我们在这里看到的是一个“功能性”模板，没有声明状态，仅处理道具。 可以使用渲染方法在基于Vue的功能组件中轻松创建它。
https://vuejs.org/v2/guide/render-function.html如果阅读此内容，您会看到props与
functional: true传递
functional: true因此，此解决方案的一个简单修复如下：
如此简单，您不必担心更改模板的语法，可以在享受Vue语法的奢华的同时坚持使用它。
快速参考：由于这是一个功能组件，因此不存在其上下文，因此，要访问props，必须使用props.name-感谢Dinesh Madhanlal的提及
第二种简便方法
对动态加载的组件使用保持活动状态。
有时，我们会使用Vue快速加载组件。 我们可以在动态加载的组件之间切换。 为了使我们能够在切换组件时保持状态并防止数据重新加载，DOMless shell是加快过程的一个很好的解决方案
第三种简单方法
当您考虑vDOM系统在Vue中的工作方式时，这对于大多数人来说将更为明显。 vDOM的目标是充当更新和跟踪（非常有效地）项目用户界面中孤立的更改并为这些目标组件运行孤立的重新渲染的中间手段，而不是重新绘制整个屏幕。
通常，我们可以创建一个具有多次渲染的外壳的组件，并且每当重绘模板的另一部分时，同一模板的其他部分都需要做很多工作。 一个简单的解决方案是将文件拆分为多个组件。 如果孩子不依赖于父母来获取数据，则应该毫无问题地对他进行处理。
第四简便的方法
在CTA事件中使用匿名函数。 每当将匿名函数传递给“ onClick”按钮时（我在React的开发人员中看到了这种模式，因为这是React中将用户数据传递给函数的一种方式），最好不要传递匿名函数。 原因是这样的。
考虑下面的示例：
这里发生的是，每当div的长度增加（如进度条），所有按钮也会被重绘。
从技术上讲，它们不应这样做，因为它们没有任何变化，对吗？ 没有道具更新或数据更新等。
这是一个技巧，JS与内存中的匿名函数进行交互，也就是说，每次重新呈现时，都会创建一个匿名函数的新实例，并且比较算法将其选择为新对象，因此即使不需要它也会重新显示按钮。
幸运的是，Vue非常令人惊讶，以至于足够聪明，可以理解，直到连接它的事件发生之前，不应调用任何单独调用的函数，因此即使是IIF，Vue也会使其变笨。这会延迟执行。
如果您想安全起见，总是值得创建一个返回另一个函数的闭包，因此包装函数只有一个实例，并且不会导致重新渲染。
魔术第五简便方法
这是一样简单，有一些灰色区域，这不是一般的解决方案。 仅当页面上有很多组件并且快速切换组件的显示时，才使用此方法。
是的，我说的是使用v-if或v-show。 两者之间存在巨大差异。 V-if = false永远不会渲染禁用指令的组件。 因此，如果此组件在短时间内切换几次，则会影响性能，因此在这种情况下使用v-show效果很好。
但是，要注意的是，在向组件中添加v-show的情况下，并且在首次渲染该组件时必须执行繁重的操作，然后无论v-show是true还是false，都将执行此操作。 您应该使用v-if将其推迟到真正需要此组件之前。 请记住，v-show仅设置所显示组件的CSS显示值：如果该组件仍在“渲染”，则不设置。
但是，即使此组件的初始工作量很大，如果它不断切换，并且每次都必须执行此方法，则最好进行v-show。 一切都取决于用户需求。
希望对您有帮助！
如果您喜欢这个，请确保订阅类似的主题：
twitter：twitter.com/
@veebuv这是翻译。 朋友们，等待您的评论。