使用Vue Composition API写出清晰、可扩展的表单实现

2023-07-23 07:18:04 281

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

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

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

为什么表单代码经常很烂

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

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

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

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

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

Mixins被认为“有害”

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

不幸的是，他提到的关于Reactmixins的缺点同样适用于Vue。在了解CompositionAPI克服这些缺点之前，让我们熟悉这些缺点。

命名冲突

使用mixin模式在运行时合并两个对象，如果他们两个都共享同名属性，会发生什么？

constmixin={
data:()=>({
myProp:null
})
}
exportdefault{
mixins:[mixin],
data:()=>({
//同名!
myProp:null
})
}

这就是合并策略发挥作用的地方。这是一组规则，用于确定当一个组件包含多个具有相同名称的选项时会发生什么。

Vue组件的默认(可选配置)合并策略指示本地选项将覆盖mixin选项。不过也有例外，例如，如果我们有多个相同类型的生命周期钩子，这些钩子将被添加到一个钩子数组中，并且所有的钩子都将被依次调用。

尽管我们不应该遇到任何实际的错误，但是在跨多个组件和mixin处理命名属性时，编写代码变得越来越困难。一旦第三方mixin作为带有自己命名属性的npm包被添加进来，就会特别困难，因为它们可能会导致冲突。

隐式依赖

mixin和使用它的组件之间没有层次关系。

这意味着组件可以使用mixin中定义的数据属性（例如mySharedDataProperty），但是mixin也可以使用组件中定义的数据属性（例如myLocalDataProperty）。这种情况通常是在mixin被用于共享输入验证时出现的，mixin可能会期望一个组件有一个输入值，它将在自己的validate方法中使用。

不过，这可能会引起一些问题。如果我们以后想重构一个组件，改变了mixin需要的变量名称，会发生什么情况呢？我们在看这个组件时，不会发现有什么问题。代码检查也不会发现它，只会在运行时看到错误。

现在想象一个有很多mixin的组件。我们可以重构本地数据属性吗？或者它会破坏mixin吗？我们得手动搜索才能知道。

mixins的缺点是CompositionAPI背后的主要推动因素之一，来看看它如何克服mixin的问题，写出清晰、可扩展的表单代码。

在Vue2项目添加VueCompositionAPI

通过VueCLI创建一个项目，将CompositionAPI作为插件添加到Vue2项目中。

$vuecreatecomposition-api-form
$cdcomposition-api-form
$npmi-S@vue/composition-api

接下来，在main.js中加入这个插件

importVuefrom"vue";
importAppfrom"./App.vue";

importVueCompositionApifrom"@vue/composition-api";
Vue.use(VueCompositionApi);

newVue({
render:h=>h(App)
}).$mount('#app');

创建输入组件

为了使这个例子简单，我们将创建一个仅包含输入名字和电子邮件的独立的组件。

$touchsrc/components/InputName.vue
$touchsrc/components/InputEmail.vue

设置InputName组件模板，包括一个HTML输入元素，并使用v-model指令创建双向绑定。

src/components/InputName.vue

设置表单

将添加novalidate属性，让浏览器知道我们将提供自定义验证。还将监听表单的submit事件，防止表单自动提交，并使用声明的onSubmit方法处理该事件。

然后，添加InputName和InputEmail组件，并分别将本地状态值name和email进行绑定。

src/App.vue

接下来使用CompositionAPI定义表单功能。在组件定义中添加setup方法，并使用CompositionAPI提供的ref方法声明两个状态变量name和email。

然后声明一个onSubmit函数来处理表单提交。

src/App.vue

//其余省略
...
import{ref}from"@vue/composition-api";

exportdefault{
name:"App",
setup(){
constname=ref("");
constemail=ref("");
functiononSubmit(){
//这里可以写提交后端的逻辑
console.log(name.value,email.value);
}
return{
name,
email,
onSubmit
}
},
...
}

设置输入组件

接下来，将定义InputName组件的功能。

在组件上使用了v-model指令，就和组件创建了双向绑定，在组件内部的props上定义value来接收值，这只做了一半的工作。

创建一个setup函数。props和组件实例被传递到这个方法中，使我们能够访问组件实例上的方法。

用解构的方式在第二个参数中获得emit方法。将需要它来完成v-model的双向绑定的另一半工作，即触发input事件，修改绑定的值。

在此之前，声明一个状态变量input，将绑定到我们在模板中声明的HTML元素上。

该变量的值是待定义的合成函数useInputValidator执行后返回的值。此函数将处理所有常见的验证逻辑。

把prop.value传递给这个方法作为第一个参数，第二个参数是一个回调函数，接收经过验证后的输入值，在这个回调函数中触发input事件，修改v-model绑定的值，实现和父组件双向绑定的功能。

src/components/InputName.vue

输入框验证功能

开始创建useInputValidator组合函数，为此，首先创建一个features文件夹，然后为其创建一个模块文件。

$mkdirsrc/features
$touchsrc/features/useInputValidator.js

在模块文件中，将导出一个函数，它需要两个参数：从父表单接收到的值，用startVal接收;以及一个回调函数，用onValidate接收。

函数需要返回一个input状态变量，因此需要声明它，通过调用ref并提供startVal的值进行初始化。

在从函数返回input之前，观察该值的变化，并调用onValidate回调，传入最新的input的值。

src/features/useInputValidator.js

import{ref,watch}from"@vue/composition-api";

exportdefaultfunction(startVal,onValidate){
letinput=ref(startVal);
watch(input,value=>{
onValidate(value);
});
return{
input
}
}

添加验证器

下一步添加验证器函数。对于InputName组件，只有一个验证规则minLength，确保输入是三个字符或更多。尚未创建的InputEmail组件将需要电子邮件验证规则。

将在src文件夹中创建模块validators.js，并写这些验证器。在实际的项目中，您可能会使用第三方库。

不会详细介绍validator函数，但是有两件重要的事情需要注意:

这些是返回函数的函数。这样的结构允许我们通过传递成为闭包一部分的参数来定制验证规则。
每个验证器返回的函数总是返回一个字符串(错误消息)，如果没有错误，则返回null。

src/validators.js

constminLength=min=>{
returninput=>input.length{
constre=/\S+@\S+\.\S+/;
returninput=>re.test(input)
?null
:"Mustbeavalidemailaddress";
}

export{minLength,isEmail};

回到上面的组合函数所在文件useInputValidator.js中，我们希望使用需要的验证，给函数添加另一个参数，它是一组验证函数。

在input监视器内部，使用数组的map方法调用验证函数，将input的当前值传递给每个验证器方法。

返回值将在一个新的状态变量errors中捕获，也将返回给所在组件使用。

src/features/useInputValidator.js

exportdefaultfunction(startVal,validators,onValidate){
constinput=ref(startVal);
consterrors=ref([]);
watch(input,value=>{
errors.value=validators.map(validator=>validator(value));
onValidate(value);
});
return{
input,
errors
}
}

最后回到InputName组件，现在将为useInputValidator方法提供必需的三个参数。
第二个参数现在是一个验证器数组，因此让我们在适当的地方声明一个数组，并传入minLength方法。

minLength是一个工厂函数，调用并传递指定的最小长度。

现在我们还从合成函数返回的对象获取input和errors，它们都将从setup方法返回，以便在组件中可用。

src/components/InputName.vue

//省略其他代码
...
import{minLength}from"@/validators";
importuseInputValidatorfrom"@/features/useInputValidator";

exportdefault{
...
setup(props,{emit}){
const{input,errors}=useInputValidator(
props.value,
[minLength(3)],
value=>emit("input",value)
);
return{
input,
errors
}
}
}

这是我们将添加到该组件的最后一个功能。在我们继续之前，花点时间对比一下这段代码比使用mixin可读性强得多。

首先，可以清楚地看到状态变量在哪里声明和修改，而不必切换到单独的mixin模块文件。另外，不需要担心局部变量和复合函数之间的名称冲突。

显示错误

进入InputName组件的模板，有潜在的错误数组要显示，将其委托给一个称为ErrorDisplay的组件来显示错误。

src/components/InputName.vue

ErrorDisplay组件根据业务需要，可以自己定制。

重用代码

这就是我们基于CompositionAPI写的表单的基本功能。本教程的目标是创建清晰且可扩展的表单代码，通过定义InputEmail组件，来证明我们已经做到了这一点。

src/components/InputEmail

原文：https://vuejsdevelopers.com/2020/03/31/vue-js-form-composition-api/
参考：https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/

到此这篇关于使用VueCompositionAPI写出清晰、可扩展的表单实现的文章就介绍到这了,更多相关VueCompositionAPI清晰、可扩展的表单内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

使用Vue Composition API写出清晰、可扩展的表单实现

热门推荐

随机推荐