巧用 Vue 中的函数式组件

Posted 2021-04-09 子曰思鱼

如果一个组件是无状态的，也就是说其无响应式数据和上下文，我们就可以将这个组件标记为 functional ，即函数式的。

由上面的描述我们可以知道，函数式组件本质是一个函数，所以其在渲染方面的开销会比普通的组件要小。

如果我们当前仅仅是提供一个包装其他组件的功能，函数式组件就能发挥其作用。

额，这是什么意思呢？

别急，我们先来看一个最简单的示例

import Vue from 'vue';
export default Vue.extend({
  name : 'plain-functional',
  functional: true,
  render (h, context) {
    return h('h1', {}, '这是一个 Functional 组件')
  }
})

与非函数式组件相比，我们的代码中多了两点：

（1）添加了一个 functional: true  的属性

（2）render 函数的参数多了一个 context

由于函数式组件是无状态的，所以 context 对象中就包含了一些需要的数据，我们在 console 中打印出来，其结构如下：

其中就包含了我们创建组件时候必要的一些参数。具体参数的作用见：

https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6

---

上面我们已经对函数式组件有了一个了解，我们就来实现  ——  一个提供包装其他组件 的组件

当前组件有一个 prop 为 type，其定义如下：

type 为 'user'，则渲染 UserInfo页面；

type 为 'goods'， 则渲染 'GoodsInfo'页面； 

import Vue from 'vue';
import UserInfo from './UserInfo';
import GoodsInfo from './GoodsInfo';
export default Vue.extend({
  name : 'plain-functional',
  props: {
    type: {
      type: String,
      default: 'user',
    },
  },
  functional: true,
  render (h, context) {
    const comp = context.props.type === 'user' 
               ? UserInfo : GoodsInfo;
    return h(comp,context.data, context.children)
  }
})

由于当前组件只是想提供包装功能，没有其他的类似响应式数据和上下文的需求，所以使用函数式组件就显得尤为恰当了。

 快在你的代码中使用这个小技巧吧~