聊聊 Vue2 中的 functional 组件

前言

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

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

functional 组件是什么?

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

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

函数化组件的定义示例:

ts 复制代码
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 会检测到这些变化并重新渲染函数化组件。

ts 复制代码
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 组件中那样使用 watchcomputed 属性来监听参数变化。因为函数化组件没有实例和响应式数据,它们只依赖于传入的 props。当 props 发生变化时,函数化组件会自动重新渲染。

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

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

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

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

使用如下:

ts 复制代码
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;
});
相关推荐
why技术2 分钟前
1K+Star的开源项目能给一个在校大学生带来什么?
前端·人工智能·后端
@PHARAOH3 分钟前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
im_AMBER17 分钟前
React 05
开发语言·前端·javascript·笔记·学习·react.js·前端框架
showker19 分钟前
ecstore等产品开启缓存-后台及前台不能登录原因-setcookie+session问题
java·linux·前端
DokiDoki之父38 分钟前
前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令
javascript·vue.js·ecmascript
RickyWasYoung1 小时前
【matlab】字符串数组 转 double
android·java·javascript
csj502 小时前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少2 小时前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)2 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰2 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome