聊聊 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;
});
相关推荐
aiprtem24 分钟前
基于Flutter的web登录设计
前端·flutter
浪裡遊27 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术35 分钟前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing39 分钟前
0704-0706上海,又聚上了
前端·新浪微博
止观止1 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall1 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴1 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码2 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
Liudef062 小时前
2048小游戏实现
javascript·css·css3