Vue.js 2函数式组件学习

什么是函数式组件？

函数式组件就是函数是组件，组件是函数，它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）。

在日常开发中，我们经常会开发一些纯展示性的业务组件，比如一些详情页面，列表界面等，它们有一个共同的特点是：

• 只要你传入数据，我就进行展现。

• 不需要有内部状态，不需要在生命周期钩子函数里面做处理。

这时候你就可以用函数式组件。

本文只以2.6版本为例说明。

官方文档

https://cn.vuejs.org/v2/guide/render-function.html#函数式组件

官方手册写的跟屎一样。网上的大部分相关教程只是把手册抄一遍，也跟屎一样。所以我要写下这篇。

为什么要用它

• 函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件

• 函数式组件结构更简单，代码结构更清晰

函数式组件与普通组件的区别

1. 函数式组件需要在声明组件是指定functional。

2. 函数式组件不需要实例化，所以没有this，this通过render函数的第二个参数来代替。

3. 函数式组件没有生命周期钩子函数，不能使用计算属性，watch等等。

4. 函数式组件不能通过$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件。

5. 因为函数式组件是没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement。

6. 函数式组件的props可以只声明一部分或者全都不声明，所有没有在props里面声明的属性都会被自动隐式解析为prop，而普通组件所有未声明的属性都被解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)。

使用场景

上面已经反复强调，凡是不需要实例化，无状态，没有生命周期的组件，除了props之外没有别的配置项，都可以改写成函数式组件。

函数式组件写法一：模板语法写法

父组件：

func.vue：

注意，没有部分。是不是很简单？

函数式组件写法二：JSX写法

注意事项：

1. 无需写部分，直接缺省。

2. render函数中遵守JSX写法，

   {props.text}

   、

   哈哈嗝

   是JS一样的短路关系，不是代码叠加关系。

3. 不要给

   {props.text}

   、

   哈哈嗝

   加引号！

由于函数式组件没有this，所以props、slots等都在context上面挂着，可以打印一下context看看。

JSX需要另外的学习成本，如果你愿意的话可以搜索相关资料学习一下。