Vue.js中functional函数化组件如何高效应用于复杂场景？

本文共计943个文字，预计阅读时间需要4分钟。

Vue.js 组件提供了 `functional` 属性，将其设置为 `true` 后，组件将变为无状态、无实例的函数化组件。由于它们仅是函数，渲染开销相对较小。函数化组件中的 `Render` 函数，可以简化组件的渲染逻辑。

Vue.js 组件提供了一个 functional 开关，设置为 true 后，就可以让组件变为无状态、无实例的函数化组件。因为只是函数，所以渲染的开销相对来说，较小。

函数化的组件中的 Render 函数，提供了第二个参数 context 作为上下文，data、props、slots、children 以及 parent 都可以通过 context 来访问。

1 示例

这里，我们用 functional 函数化组件来实现一个智能组件。