扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了使用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
})
} 
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网