Vue 3 迁移策略笔记—— 第13节：函数式组件

前言

本笔记主要基于官方文档《迁移策略—— 函数式组件》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

知识储备

• 渲染函数 & JSX
• 函数式组件

概述

• Vue 3.x 对有状态组件的性能进行了提升，与函数式组件的性能相差无几。所以，建议只使用有状态组件。

函数式组件的介绍

​ 函数式组件是一种比较简单，没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法的组件（与之相反的是有 stateful components状态组件）。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。一个函数式组件就像这样：

Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})

函数式组件更详细的说明请查询：函数式组件

在 Vue 2.x 中，函数式组件主要有两个特点：

• 因为函数式组件只是函数，所以渲染开销也低很多，初始化比有状态的组件快很多。
• 可以返回多个根节点

然而，在 Vue 3.x 中，有状态组件的性能已经得到提升，与函数式组件的相差无几了。此外，现在有状态组件同样可以返回多个根节点的。因此，函数式组件仅剩的特点就只有比较简单。例如，用于创建动态标题组件。所以，Vue3.x 建议更多的去使用有状态组件。

Vue 2.x 函数式组件的用法

以创建动态标题组件为例：

函数写法

export default {
  functional: true,
  props: ['level'],
  render(h, { props, data, children }) {
    return h(`h${props.level}`, data, children)
  }
}

单文件组件写法

<template functional>
  <component
    :is="`h${props.level}`"
    v-bind="attrs"
    v-on="listeners"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

Vue 3.x 函数式组件的用法

函数写法

相较于 Vue 2.x 有三点变化：

• 在 Vue 3.x 中，所有的函数式组件都是由普通函数创建的。以此，不需要添加functional: true。
• export default导出的是一个函数，函数有两个参数：
  • props
  • context(上下文):context是一个对象，包含attrs、slot、emit属性
• h函数需要全局导入

import { h } from 'vue'

const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}

DynamicHeading.props = ['level']

export default DynamicHeading

单文件组件写法

相较于 Vue 2.x 有两点变化：

• 移除functional
• 重命名props、attrs为$props、$attrs

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

主要区别：

• 将functional属性从template中移除

• 将listeners移到$attrs中

  ---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听