如何用Vue Composition API编写一个清晰且可扩展的长尾词表单组件？

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

表格是前端开发中最常用的组件之一，您可能会在其中发现许多混乱的代码。基于Vue.js等组件框架，虽然提高了前端代码的可扩展性，但表格的问题依然存在。

表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。

基于组件的框架，如 Vue.js，在提高前端代码的可扩展性方面做了很多工作，但是表单的问题仍然存在。

在本教程中，将向您展示新的 Vue Composition API（即将加入 Vue 3 中）如何使表单代码更清晰、更具可扩展性。

为什么表单代码经常很烂

像 Vue 这种基于组件的框架的关键设计模式是组件组合。

这种模式将应用程序的特性抽象为独立的、单一用途的组件，这些组件通信使用 props 和事件的方式。

然而，在此模式下，不能很好地对表单进行抽象，因为表单的功能和状态显然不属于任何一个组件，因此将其分离通常会导致与解决的问题一样多的问题。

在 Vue 中表单代码写的烂的另一个重要原因是，直到 Vue2 之前， 还没有提供强大的手段在组件之间重用代码。重用代码对表单来说很重要，因为表单输入通常有明显的不同，但在功能上有许多相似之处。

Vue2 提供的代码重用的主要方法是 mixin，我认为这是一个明显的反模式。

Mixins 被认为“有害”

早在2016年中期，丹·阿布拉莫夫(Dan Abramov)就写了《mixin被认为是有害的》(mixin Considered Harmful)，他在书中辩称，将 mixin 用于在 React 组件中重用逻辑是一种反模式，主张远离它们。