如何在 Vue.js 中将渲染性能提升 70%
结局🥳
编辑
大家好！😜
你们最近怎么样？希望你们一切都好！
今天我将为大家讲解函数式组件，以及它在 Vue.js 框架中的应用。最重要的是，如何提升渲染性能！
让我们先来解释一下……
什么是功能组件？🤨
this函数式组件是不保存状态（无状态 - 没有响应式数据）和实例（无实例 - 没有上下文）的组件。
我们可以将组件标记functional为功能组件，以便将其用作函数式组件。它看起来会像这样：
现在，让我们在实际案例中使用它，比如 GitHub 卡片，其中包含个人资料图片和技术部分，用户可以在其中撰写有关其学习的总结。
如何将其转化为一个功能性组件？
首先我们加上functional标记：
现在到了棘手的部分，如果我们运行这段代码，就会看到错误。这是因为我们没有 Vue 实例，所以无法使用关键字this及其自动绑定。那么我们该如何解决这个问题呢？作为函数式组件，我们可以访问“context”参数。在这种情况下，context 会让我们访问 props 键，因此我们可以在代码中使用它：
恭喜！你刚刚创建了你的第一个 Vue 函数式组件！离项目优化又近了一步！🎉🎉🎉
深入探究背景😎
context 参数是一个对象，具有以下属性：
- props：props 对象
- children：VNode 子节点的数组
- slots：返回 slots 对象的函数
- scopedSlots：（v2.6.0+）一个公开传入的作用域槽的对象。同时，它也公开普通槽作为函数。
- data：整个数据对象，作为 createElement 的第二个参数传递给组件。
- 父组件：对父组件的引用
- listeners：（v2.3.0+）包含父级注册的事件监听器的对象。这是 data.on 的别名。
- 注入：（v2.3.0+）如果使用注入选项，这将包含已解决的注入。
另一个例子🦖
既然我们已经了解了基本原理，那就让我们付诸实践吧！
我将向您展示如何在函数式组件中使用点击事件：
你的父组件是这样调用我们的组件的：
要在功能组件中使用此点击事件，我们需要进行一些更改：
我们添加了该功能@click="listeners.click"，以便功能组件可以“监听”父组件的“点击”事件，因为我们没有该this关键字。
更好的方法是使用 `<Component>` v-on="listeners"，因为点击事件（和按键事件）已经集成到组件中，无需手动绑定。但如果组件有自定义调用者，则需要手动显式绑定，例如：@click.stop="listeners.contact"
性能提升70% 🏎
为什么？为什么这种组件比普通组件好用得多？而且为什么使用如此严格的组件会如此麻烦？
嗯，答案基本上是……
速度。
因为函数式组件没有状态，所以它们不需要像 Vue 的响应式系统那样进行额外的初始化。
函数式组件仍然会对传入的新属性等变化做出反应，但组件本身无法知道何时其数据发生了变化，因为它不维护自己的状态。
我看到一些基准测试表明，使用函数式组件可以提高 40% 到 70% 的性能。
我们可以在这里看到一个基准测试：https://codesandbox.io/s/vue-template-yterr? fontsize=14
什么时候用呢？🥸
好吧，我们换个说法吧：
- 当您使用 v-for 循环时，循环内部的项目可能非常适合作为函数式组件。
- 仅用于展示的组件也是一个很好的功能组件候选者，因为它不需要状态。
- “高阶组件”用于将标记或基本功能包装在另一个组件周围。
结局🥳
好了，今天就到这里。我认为功能组件应该大规模应用。我自己现在就要开始用了！
感谢阅读，祝您度过美好的一天！
编辑
在 3.x 版本中，函数式组件相比 2.x 版本带来的性能提升已经微乎其微，因此建议直接使用有状态组件。
v3.vuejs.org/guide/migration/funct...
相关链接和文章：
https://www.digitalocean.com/community/tutorials/vuejs-functional-components
https://www.twilio.com/blog/react-choose-functional-components
https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713
文章来源：https://dev.to/matheusgomes062/how-to-increase-your-rendering-performance-by-70-in-vue-js-4dia