表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。
基于组件的框架，如 Vue.js，在提高前端代码的可扩展性方面做了很多工作，但是表单的问题仍然存在。
在本教程中，将向您展示新的 Vue Composition API（即将加入 Vue 3 中）如何使表单代码更清晰、更具可扩展性。
为什么表单代码经常很烂
像 Vue 这种基于组件的框架的关键设计模式是组件组合。
这种模式将应用程序的特性抽象为独立的、单一用途的组件，这些组件通信使用 props 和事件的方式。
然而，在此模式下，不能很好地对表单进行抽象，因为表单的功能和状态显然不属于任何一个组件，因此将其分离通常会导致与解决的问题一样多的问题。
在 Vue 中表单代码写的烂的另一个重要原因是，直到 Vue2 之前， 还没有提供强大的手段在组件之间重用代码。重用代码对表单来说很重要，因为表单输入通常有明显的不同，但在功能上有许多相似之处。
Vue2 提供的代码重用的主要方法是 mixin，我认为这是一个明显的反模式。
Mixins 被认为“有害”
早在2016年中期，丹·阿布拉莫夫(Dan Abramov)就写了《mixin被认为是有害的》(mixin Considered Harmful)，他在书中辩称，将 mixin 用于在 React 组件中重用逻辑是一种反模式，主张远离它们。
不幸的是，他提到的关于 React mixins 的缺点同样适用于 Vue。在了解 Composition API 克服这些缺点之前，让我们熟悉这些缺点。
命名冲突
使用 mixin 模式在运行时合并两个对象，如果他们两个都共享同名属性，会发生什么？
const mixin = { data: () => ({ myProp: null }) } export default { mixins: [mixin], data: () => ({ // 同名! myProp: null }) }
这就是合并策略发挥作用的地方。这是一组规则，用于确定当一个组件包含多个具有相同名称的选项时会发生什么。
Vue 组件的默认(可选配置)合并策略指示本地选项将覆盖 mixin 选项。不过也有例外，例如，如果我们有多个相同类型的生命周期钩子，这些钩子将被添加到一个钩子数组中，并且所有的钩子都将被依次调用。
尽管我们不应该遇到任何实际的错误，但是在跨多个组件和 mixin 处理命名属性时，编写代码变得越来越困难。一旦第三方 mixin 作为带有自己命名属性的 npm 包被添加进来，就会特别困难，因为它们可能会导致冲突。
隐式依赖
mixin 和使用它的组件之间没有层次关系。
这意味着组件可以使用 mixin 中定义的数据属性（例如mySharedDataProperty），但是 mixin 也可以使用组件中定义的数据属性（例如myLocalDataProperty）。这种情况通常是在 mixin 被用于共享输入验证时出现的，mixin 可能会期望一个组件有一个输入值，它将在自己的 validate 方法中使用。
不过，这可能会引起一些问题。如果我们以后想重构一个组件，改变了 mixin 需要的变量名称，会发生什么情况呢？我们在看这个组件时，不会发现有什么问题。代码检查也不会发现它，只会在运行时看到错误。
现在想象一个有很多 mixin 的组件。我们可以重构本地数据属性吗？或者它会破坏 mixin 吗？我们得手动搜索才能知道。
mixins 的缺点是 Composition API 背后的主要推动因素之一，来看看它如何克服 mixin 的问题，写出清晰、可扩展的表单代码。
在 Vue2 项目添加 Vue Composition API
通过 Vue CLI 创建一个项目，将 Composition API 作为插件添加到 Vue 2 项目中。
$ vue create composition-api-form $ cd composition-api-form $ npm i -S @vue/composition-api
接下来，在 main.js 中加入这个插件
import Vue from "vue"; import App from "./App.vue"; import VueCompositionApi from "@vue/composition-api"; Vue.use(VueCompositionApi); new Vue({ render: h => h(App) }).$mount('#app');
创建输入组件
为了使这个例子简单，我们将创建一个仅包含输入名字和电子邮件的独立的组件。
$ touch src/components/InputName.vue $ touch src/components/InputEmail.vue
设置 InputName 组件模板，包括一个 HTML 输入元素，并使用 v-model 指令创建双向绑定。
src/components/InputName.vue
<template> <div> <label> Name <input type="text" v-model="input" /> </label> </div> </template> <script> export default { name: 'InputName' } </script>
设置表单