使用VueCompositionAPI如何实现清晰、可扩展的表单-创新互联

这篇文章主要讲解了使用Vue Composition API如何实现清晰、可扩展的表单，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

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

基于组件的框架，如 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
 })
}