浅聊一下Vue2中的functional组件

前言

最近组内有一个分享提到了 Vue2 的 functional 组件，大致上是说这个东西没有生命周期，在渲染层面上，会减少很多的消耗，一番处理之后，首屏时间和内存都能减少不少。

由此，我打算来好好学一下挖一下这个知识点。

functional 组件是什么？

Vue.js 中的 functional 函数化组件是一种特殊类型的无状态组件，它不依赖于内部状态，只依赖于传入的 props。这种组件没有实例，也就是说它们没有 this 上下文。函数化组件的主要特点如下：

• 无状态：函数化组件不包含响应式数据或内部状态，它们只依赖于传入的 props。
• 无实例：函数化组件没有实例，因此没有 this 上下文。
• 更高的性能：由于没有实例和响应式数据，函数化组件的渲染性能更高，适用于频繁更新的场景。
• 简洁的定义：函数化组件使用 render 函数定义，不需要完整的 Vue 组件选项对象。

函数化组件的定义示例：

Vue.component('my-functional-component', {
  functional: true,
  props: {
    message: {
      type: String,
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement('div', context.props.message);
  }
});

functional函数化组件做比对是深度比对，会对对象深入的做对比，不是浅比较：

如果 props 对象外部不变，但内部的参数发生变化，函数化组件会重新渲染。因为函数化组件是无状态的，它们只依赖于传入的 props。当 props 的内部参数发生变化时，Vue 会检测到这些变化并重新渲染函数化组件。

Vue.component('my-functional-component', {
  functional: true,
  props: {
    userInfo: {
      type: Object,
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement('div', context.props.userInfo.name);
  }
});

特点

1.functional 函数化组件本身无 watch/computed，这就导致我们不能像在普通 Vue 组件中那样使用 watch 或 computed 属性来监听参数变化。因为函数化组件没有实例和响应式数据，它们只依赖于传入的 props。当 props 发生变化时，函数化组件会自动重新渲染。

如果我们想要监听怎么办？

比较可行的办法是：在父组件中监听 props 变化，并在适当的时机传递新的 props 给函数化组件。这样，函数化组件会在接收到新的 props 时自动重新渲染。

2.functional 函数化组件本身无实例，这会导致如下后果：

• 在函数化组件中，无法使用 this 访问组件实例，因为它们没有实例。
• 由于没有实例，函数化组件无法使用 Vue 实例的方法和属性，例如 $emit、$watch、$refs 等。
• 函数化组件没有实例，因此无法使用生命周期钩子函数，如 created、mounted、updated 等。
• 函数化组件没有响应式数据和内部状态，它们只依赖于传入的 props。这意味着我们无法在函数化组件中使用 data、computed 和 watch 等选项。
• 在函数化组件中，我们需要通过 context 对象访问插槽（slots）和作用域插槽（scoped slots），而不是使用 this.$slots 和 this.$scopedSlots。

使用如下：

Vue.component('my-functional-component', {
  functional: true,
  props: {
    message: {
      type: String,
      required: true
    }
  },
  render: function (createElement, context) {
    // 访问 props
    const message = context.props.message;
    // 访问插槽
    const slots = context.slots();
    const defaultSlot = slots.default;
    // 访问作用域插槽
    const scopedSlots = context.scopedSlots;
    const customSlot = scopedSlots.customSlot;
    // 访问事件监听器
    const listeners = context.listeners;
    const clickListener = listeners.click;
});

到此这篇关于浅聊一下Vue2中的functional组件的文章就介绍到这了,更多相关Vue2 functional组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论