Vue函数式组件

函数式组件

📌函数式组件是 Vue.js 中一种特殊类型的组件，它是无状态的、无实例的，没有生命周期.主要用于处理简单的 UI 渲染任务。函数式组件的声明方式和使用方式与常规组件有所不同，适用于一些简单的场景，例如只依赖于传入的 props 和上下文的组件。

声明方式

functional: true：设置组件为函数式组件。函数式组件没有实例上下文，没有生命周期钩子。

函数式组件的 render 函数接收两个参数：createElement 和 context。

1. createElement: 用于创建VNode（虚拟节点）。

   • h('div', { class: 'my-functional-component' }, context.props.message)：使用 createElement 函数创建一个 div 元素，类名为 my-functional-component，内容为 message 属性的值。

2. context: 包含了组件的上下文信息，没有 this，所以通过 context 来访问属性和插槽等信息。

   context 对象的主要属性包括：

   • props: 定义组件接收的属性。在这里，我们定义了一个 message 属性。
   • children: 子节点。
   • slots: 插槽内容。
   • data: 数据对象，包含 class、style 等属性。
   • parent: 父组件实例。
   • listeners: 事件监听器。

// 定义函数式组件
const MyFunctionalComponent = {
  functional: true,
  props: {
    message: {
      type: String,
      required: true
    }
  },
  render(h, context) {
    // `h` 是 createElement 函数，`context` 是上下文对象
    return h('div', { class: 'my-functional-component' }, context.props.message);
  }
};

// 全局注册函数式组件
Vue.component('my-functional-component', MyFunctionalComponent);

// 创建 Vue 实例并使用全局组件
new Vue({
  el: '#app',
  template: `
    <div>
      <h1>Hello from Parent Component!</h1>
      <my-functional-component message="Hello from Functional Component!"></my-functional-component>
    </div>
  `
});

特点

1. 无状态：函数式组件是无状态的，不允许使用 data 选项，并且没有实例，因此也无法使用实例生命周期钩子函数。
2. 无实例：没有实例上下文（没有 this）。由于函数式组件没有实例，因此无法使用 this 关键字，包括无法访问实例的 data、methods 等
3. 性能高：因为不需要实例化，所以渲染性能较高。函数式组件相对于常规组件具有更轻量的性能开销，因为它们不涉及实例的创建和维护。
4. 只渲染：专注于渲染，适合简单的展示逻辑。
5. props** 参数：** ​
   • 函数式组件的 render 函数接受两个参数：h（用于创建虚拟节点的 createElement 函数）和一个上下文对象。上下文对象包含了 props、children（子节点）、parent（父组件的实例）等信息。
6. render** 函数：** ​
   • 在函数式组件中，主要工作是通过 render 函数创建虚拟节点。render 函数的返回值是一个虚拟节点，它描述了组件的结构和内容。
7. 适用场景：
   • 函数式组件适用于简单的 UI 渲染任务，特别是那些只依赖于传入的 props 和上下文信息的组件。
8. 示例：
   • 一个简单的函数式组件示例，用于显示传入的 message：

   <template functional>
     <div>{{ props.message }}</div>
   </template>
   
   <script>
   export default {
     functional: true,
     props: {
       message: String
     }
   };
   </script>
   

   函数式组件的使用场景主要是在需要优化性能或者处理简单渲染的场合，它可以减少实例的创建和销毁的开销。但请注意，函数式组件的能力相对有限，不适用于所有情况，因此在选择使用时需要谨慎考虑。