https://juejin.cn/post/6844903887787278349
機能コンポーネントとは
コンポーネントは、ときにどのような状態を管理していない、ない、渡された任意の状態を監視していない、とライフ・サイクル・メソッドを持っていない、コンポーネントは、としてマークすることができfunctional、それがどの手段、ステートレスである（無反応データ）と無インスタンス（いいえ、このコンテキスト）。
使い方
src\components\render\heading-functional.vue
<script>
export default {
functional: true, // 函数式组件
props: ["level", "title"],
// heading组件
// <heading :level="1" :title="title" icon="cart">{
{title}}</heading>
// <h2 title=""></h2>
render(h, context) {
// 子节点数组
let children = [];
// 没有this,同样也没有$slot.default
// 默认插槽，默认子元素的写法有所更改
children = children.concat(context.children);
const {
title, level } = context.props;
return h(
"h" + level, // 参数1，tagname
{
attrs: {
title } }, // 参数2：{。。。}
children // 虚拟子节点VNode不能再使用$slot.default
);
},
};
</script>
<style lang="scss" scoped>
</style>
src\view\test\test2.vue
<template>
<div>
<h2>函数式组件</h2>
<heading-functional :level="3" title="函数式组件">
这是一个函数式组件
</heading-functional>
</div>
</template>
<script>
import HeadingFunctional from "../../components/render/heading-functional.vue";
export default {
components: { HeadingFunctional },
};
</script>
<style lang="scss" scoped>
</style>
効果：
機能コンポーネントを使用する理由
機能コンポーネントは、コンポーネントの使用をより複雑にする可能性がありますが、それでもなぜそれが必要なのですか？
速度
機能コンポーネントには状態がないため、Vueのリアクティブシステムのように追加の初期化は必要ありません。
機能コンポーネントは、新しい着信小道具など、対応する変更に応答する変更を行いますが、コンポーネント自体では、独自の状態を維持しないため、データがいつ変更されたかを知ることができません。
数字について話したい人のために、ブロガーはベンチマークテストを行い、1000個のリスト、ステートフルコンポーネントと機能コンポーネントをレンダリングしました。ステートフルコンポーネントには140ミリ秒、機能コンポーネントには40ミリ秒かかりました。
大規模なアプリケーションの場合、機能コンポーネントを使用すると、DOMのレンダリングと更新が大幅に改善されます。
機能コンポーネントを使用する場合
機能コンポーネントは、多くの状況に適していない場合があります。結局のところ、JavaScriptフレームワークを使用する目的は、レスポンシブアプリケーションを構築することです。Vueでは、これは応答性なしでは実行できません。
ただし、一部のシナリオは、機能コンポーネントの使用に非常に適しています。
- 単純な表示コンポーネント、いわゆるダムコンポーネント。たとえば、ボタン、ピル、タグ、カード、さらにはページ全体でさえ、[バージョン情報]ページなどの静的テキストです。
- 「高レベルコンポーネント」-コンポーネントをパラメータとして受け取り、パッケージ化されたコンポーネントを返すために使用されます
- v-forループの各項目は、通常、適切な候補です。