立等可取的 Vue + Typescript 函数式组件实战

Posted 2021-03-30 云前端

不同于面向对象编程（OOP）中通过抽象出各种对象并注重其间的解耦问题等，函数式编程（FP） 聚焦最小的单项操作，将复杂任务变成一次次 f(x) = y 式的函数运算叠加。函数是 FP 中的一等公民（First-class object），可以被当成函数参数或被函数返回；同时，这些函数应该不依赖或影响外部状态，这意味着对于给定的输入，将产生相同的输出。

在 Vue 中，一个函数式组件（FC - functional component）就意味着一个没有实例（没有 this 上下文、没有生命周期方法、不监听任何属性、不管理任何状态）的组件。从外部看，它也可以被视作一个只接受一些 prop 并按预期返回某种渲染结果的 fc(props) => VNode 函数。Vue 中的 FC 有时也被称作无状态组件（stateless component）。

❓为何需要函数式（无状态）组件

• 因为函数式组件忽略了生命周期和监听等实现逻辑，所以 渲染开销很低、执行速度快
• 相比于普通组件中的 v-if 等指令，使用 h 函数或结合 jsx 更容易地实现子组件的条件性渲染
• 比普通组件中的 <component> + v-if 指令  更容易地实现 高阶组件（HOC - higher-order component）模式，即一个封装了某些逻辑并条件性地渲染参数子组件的容器组件

❓函数式组件与真正 FP 有何区别

真正的 FP 函数基于不可变状态（immutable state），但 Vue 中的“函数式”组件没有这么理想化。后者基于可变数据，相比普通组件也只是没有实例概念而已。

同时，与 React Hooks 类似的是，Vue Composition API 也在一定程度上为函数式组件带来了少许响应式特征、onMounted 等生命周期式的概念和管理副作用的方法。

❓TypeScript 对于函数式组件有何意义

无论是 React 还是 Vue，本身都提供了一些验证 props 类型的手段。但这些方法一来配置上都稍显麻烦，二来对于轻巧的函数式组件都有点过“重”了。

TypeScript 作为一种强类型的 JavaScript 超集，可以被用来更精确的定义和检查 props 的类型、使用更简便，在 VSCode 或其他支持 Vetur 的开发工具中的自动提示也更友好。

以上是关于立等可取的 Vue + Typescript 函数式组件实战的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Typescript 在 Vue 3.0 setup() 函数中使用 async/await

使用 Typescript 在 Vue 3 中的函数上缺少返回类型

vue-class-component + typescript：如何在导入的函数中使用组件的类作为“this”的类型？

Vue + TypeScript + Firebase：如何键入包含 firebase `User` 的`ref` 的对象？

Vue + Typescript - 使用基于类的装饰器导入错误

Vue 3 道具验证以及 Typescript