Vue 3 | 函数式组件变形记

Posted 2021-04-09 劉凯里

开门见山 

从上帝视角看一下发生了什么：

• 官方团队宣称，Vue 3 中函数式组件的性能提升微乎其微（与 Vue 2.x 相比），所以建议直接使用常规组件就好。
• 如果想创建一个函数式组件，写一个接收 props 和 context 的普通函数就可以了。
• 废弃：单文件组件（SFC）中 <template> 的 functional 属性被干掉了。
• 废弃：通过给 Render 函数传递 { functional: true } 以创建函数式组件的方式也被废弃了。
  
  

事情是这样的... 

在 Vue 2.x 的版本中，函数式组件主要有以下两个使用场景：

• 因为函数式组件的初始化和渲染都很快（快过常规组件），所以通常作为一种提升性能的角色出现
• 用来返回多个根节点

然而，在 Vue 3 中，常规组件的性能有了很大提升，相比之下，这时的函数式组件在性能上失去了以往的优势。另外，现在的常规组件也支持返回多个根节点了。因此，函数式组件仅剩的唯一用途就是用来实现简单组件了，比如一个动态生成不同标题的组件（市场被挤压，好可怜）。

2.x 版本是这样的 

就用上面提到的例子，那个动态生成不同标题的组件：

// Vue 2 函数式组件
export default {
  functional: true,
  props: [level],
  render(h, { props, data, children }) {
    return h(`h${props.level}`, data, children);
  }
}

也可以采用 <template> 函数式组件的方式去写：

// Vue 2 用模版实现的函数式组件
<template>
 <component :is="`h${props.level}`"/>
</template>

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

3.x 安利时刻 

在 Vue 3 中，只要是通过普通函数创建的组件，都是函数式组件，也不用传递之前那个 { functional: true }的参数了。

函数会接受两个参数：props 和 context 。前者不用说了，后者包含了组件的 attrs、slots 和 emit 等属性。

此外，之前也有提到，h 也不再作为函数的参数了，需要手动从全局引入。

各位观众！现在把上面那个例子改写成 Vue 3 的写法：

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 的 <template> 函数式组件迁移到 Vue 3，直接把组件的 functional 属性去掉就好了，不需要其他额外的操作。

“

如果你想获得关于 Vue 3 函数式组件的更多信息，请访问：https://v3.vuejs.org/guide/migration/functional-components.html#components-created-by-functions（目前还没有中文本）。