一、functional 组件是什么？
Vue.js 中的 functional 函数化组件是一种特殊类型的无状态组件，它不依赖于内部状态，只依赖于传入的 props。这种组件没有实例，也就是说它们没有 this 上下文。函数化组件的主要特点如下：
- 无状态：函数化组件不包含响应式数据或内部状态，它们只依赖于传入的 props。
- 无实例：函数化组件没有实例，因此没有 this 上下文。
- 更高的性能：由于没有实例和响应式数据，函数化组件的渲染性能更高，适用于频繁更新的场景。
- 简洁的定义：函数化组件使用 render 函数定义，不需要完整的 Vue 组件选项对象。
函数化组件的定义示例：
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 会检测到这些变化并重新渲染函数化组件。
Vue.component('my-functional-component', {
functional: true,
props: {
userInfo: {
type: Object,
required: true
}
},
render: function (createElement, context) {
return createElement('div', context.props.userInfo.name);
}
});
二、functional 组件的特点
functional 函数化组件本身无 watch/computed，这就导致我们不能像在普通 Vue 组件中那样使用 watch 或 computed 属性来监听参数变化。因为函数化组件没有实例和响应式数据，它们只依赖于传入的 props。当 props 发生变化时，函数化组件会自动重新渲染。
如果我们想要监听怎么办？
比较可行的办法是：在父组件中监听 props 变化，并在适当的时机传递新的 props 给函数化组件。这样，函数化组件会在接收到新的 props 时自动重新渲染。
functional 函数化组件本身无实例，这会导致如下后果：
- 在函数化组件中，无法使用 this 访问组件实例，因为它们没有实例。
- 由于没有实例，函数化组件无法使用 Vue 实例的方法和属性，例如
$emit、$watch、$refs等。- 函数化组件没有实例，因此无法使用生命周期钩子函数，如 created、mounted、updated 等。
- 函数化组件没有响应式数据和内部状态，它们只依赖于传入的 props。这意味着我们无法在函数化组* 件中使用 data、computed 和 watch 等选项。
- 在函数化组件中，我们需要通过 context 对象访问插槽（slots）和作用域插槽（scoped slots），>而不是使用
this.$slots和this.$scopedSlots。
使用如下：
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;
});