Vue函数式组件

函数式组件

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

声明方式

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

函数式组件的 render 函数接收两个参数:createElementcontext

  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: 数据对象,包含 classstyle 等属性。
    • 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 关键字,包括无法访问实例的 datamethods
  3. 性能高:因为不需要实例化,所以渲染性能较高。函数式组件相对于常规组件具有更轻量的性能开销,因为它们不涉及实例的创建和维护。
  4. 只渲染:专注于渲染,适合简单的展示逻辑。
  5. props** 参数:** ​
    • 函数式组件的 render 函数接受两个参数:h(用于创建虚拟节点的 createElement 函数)和一个上下文对象。上下文对象包含了 propschildren(子节点)、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>
    
    函数式组件的使用场景主要是在需要优化性能或者处理简单渲染的场合,它可以减少实例的创建和销毁的开销。但请注意,函数式组件的能力相对有限,不适用于所有情况,因此在选择使用时需要谨慎考虑。
  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值