Vue 进阶面试题, 什么是 Vue 的函数式组件?
Vue 进阶面试题, 什么是 Vue 的函数式组件?
QA
Step 1
Q:: 什么是 Vue 的函数式组件？
A:: Vue 的函数式组件是一种无状态、无生命周期方法的轻量级组件。它们通过传入的 props 和上下文 context 直接返回虚拟 DOM（VNode），从而实现渲染。由于它们没有自己的状态（state）和生命周期方法（lifecycle hooks），所以性能上比普通组件要更高。函数式组件适用于需要渲染简单的、纯粹的 UI 组件，而不涉及内部状态管理的场景。
Step 2
Q:: 如何定义一个 Vue 的函数式组件？
A:: 在 Vue 中，定义函数式组件可以通过将 functional: true 作为组件选项传递给组件配置对象。组件的模板或者 render 函数将会接受两个参数：props 和 context。示例代码如下：
Vue.component('my-functional-component', {
functional: true,
render: function (createElement, context) {
return createElement('div', context.props.message)
}
})
这种方式定义的组件不会有 this 上下文，因为它们是无状态的。
Step 3
Q:: 函数式组件有哪些优缺点？
A:: 优点包括：1) 性能更好，因为函数式组件无状态，不涉及生命周期方法，所以创建和销毁开销更低；2) 更易于测试和调试，因为它们只依赖输入的 props 来确定输出。而缺点主要是：1) 缺乏内部状态和生命周期方法，不适合需要复杂逻辑的场景；2) 相比普通组件，函数式组件的使用场景相对有限。
Step 4
Q:: 在 Vue 中什么时候应该使用函数式组件？
A:: 函数式组件适用于以下场景：1) 需要创建性能敏感的无状态 UI 组件时；2) 组件的渲染逻辑非常简单且不涉及状态管理和副作用时；3) 作为高频率渲染的子组件时，因为无状态的特性，函数式组件能够减少性能开销。
Step 5
Q:: 在函数式组件中如何处理 props？
A:: 在函数式组件中，props 作为第二个参数 context 的一个属性传入，可以直接通过 context.props 来访问。示例如下：
Vue.component('my-functional-component', {
functional: true,
render: function (createElement, context) {
return createElement('div', context.props.message)
}
})