這篇文章主要講解了使用Vue Composition API如何實(shí)現(xiàn)清晰、可擴(kuò)展的表單，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供武山網(wǎng)站建設(shè)、武山做網(wǎng)站、武山網(wǎng)站設(shè)計(jì)、武山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、武山企業(yè)網(wǎng)站模板建站服務(wù)，十余年武山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

表單是前端開(kāi)發(fā)中最棘手的部分之一，您可能會(huì)在其中發(fā)現(xiàn)很多混亂的代碼。

基于組件的框架，如 Vue.js，在提高前端代碼的可擴(kuò)展性方面做了很多工作，但是表單的問(wèn)題仍然存在。

在本教程中，將向您展示新的 Vue Composition API（即將加入 Vue 3 中）如何使表單代碼更清晰、更具可擴(kuò)展性。

為什么表單代碼經(jīng)常很爛

像 Vue 這種基于組件的框架的關(guān)鍵設(shè)計(jì)模式是組件組合。

這種模式將應(yīng)用程序的特性抽象為獨(dú)立的、單一用途的組件，這些組件通信使用 props 和事件的方式。

然而，在此模式下，不能很好地對(duì)表單進(jìn)行抽象，因?yàn)楸韱蔚墓δ芎蜖顟B(tài)顯然不屬于任何一個(gè)組件，因此將其分離通常會(huì)導(dǎo)致與解決的問(wèn)題一樣多的問(wèn)題。

在 Vue 中表單代碼寫(xiě)的爛的另一個(gè)重要原因是，直到 Vue2 之前， 還沒(méi)有提供強(qiáng)大的手段在組件之間重用代碼。重用代碼對(duì)表單來(lái)說(shuō)很重要，因?yàn)楸韱屋斎胪ǔＳ忻黠@的不同，但在功能上有許多相似之處。

Vue2 提供的代碼重用的主要方法是 mixin，我認(rèn)為這是一個(gè)明顯的反模式。

Mixins 被認(rèn)為“有害”

早在2016年中期，丹·阿布拉莫夫(Dan Abramov)就寫(xiě)了《mixin被認(rèn)為是有害的》(mixin Considered Harmful)，他在書(shū)中辯稱(chēng)，將 mixin 用于在 React 組件中重用邏輯是一種反模式，主張遠(yuǎn)離它們。

不幸的是，他提到的關(guān)于 React mixins 的缺點(diǎn)同樣適用于 Vue。在了解 Composition API 克服這些缺點(diǎn)之前，讓我們熟悉這些缺點(diǎn)。

命名沖突

使用 mixin 模式在運(yùn)行時(shí)合并兩個(gè)對(duì)象，如果他們兩個(gè)都共享同名屬性，會(huì)發(fā)生什么？

const mixin = {
 data: () => ({
  myProp: null
 })
}
export default {
 mixins: [mixin],
 data: () => ({
  // 同名!
  myProp: null
 })
}

這就是合并策略發(fā)揮作用的地方。這是一組規(guī)則，用于確定當(dāng)一個(gè)組件包含多個(gè)具有相同名稱(chēng)的選項(xiàng)時(shí)會(huì)發(fā)生什么。

Vue 組件的默認(rèn)(可選配置)合并策略指示本地選項(xiàng)將覆蓋 mixin 選項(xiàng)。不過(guò)也有例外，例如，如果我們有多個(gè)相同類(lèi)型的生命周期鉤子，這些鉤子將被添加到一個(gè)鉤子數(shù)組中，并且所有的鉤子都將被依次調(diào)用。

盡管我們不應(yīng)該遇到任何實(shí)際的錯(cuò)誤，但是在跨多個(gè)組件和 mixin 處理命名屬性時(shí)，編寫(xiě)代碼變得越來(lái)越困難。一旦第三方 mixin 作為帶有自己命名屬性的 npm 包被添加進(jìn)來(lái)，就會(huì)特別困難，因?yàn)樗鼈兛赡軙?huì)導(dǎo)致沖突。

隱式依賴(lài)

mixin 和使用它的組件之間沒(méi)有層次關(guān)系。

這意味著組件可以使用 mixin 中定義的數(shù)據(jù)屬性（例如mySharedDataProperty），但是 mixin 也可以使用組件中定義的數(shù)據(jù)屬性（例如myLocalDataProperty）。這種情況通常是在 mixin 被用于共享輸入驗(yàn)證時(shí)出現(xiàn)的，mixin 可能會(huì)期望一個(gè)組件有一個(gè)輸入值，它將在自己的 validate 方法中使用。

不過(guò)，這可能會(huì)引起一些問(wèn)題。如果我們以后想重構(gòu)一個(gè)組件，改變了 mixin 需要的變量名稱(chēng)，會(huì)發(fā)生什么情況呢？我們?cè)诳催@個(gè)組件時(shí)，不會(huì)發(fā)現(xiàn)有什么問(wèn)題。代碼檢查也不會(huì)發(fā)現(xiàn)它，只會(huì)在運(yùn)行時(shí)看到錯(cuò)誤。

現(xiàn)在想象一個(gè)有很多 mixin 的組件。我們可以重構(gòu)本地?cái)?shù)據(jù)屬性嗎？或者它會(huì)破壞 mixin 嗎？我們得手動(dòng)搜索才能知道。

mixins 的缺點(diǎn)是 Composition API 背后的主要推動(dòng)因素之一，來(lái)看看它如何克服 mixin 的問(wèn)題，寫(xiě)出清晰、可擴(kuò)展的表單代碼。

在 Vue2 項(xiàng)目添加 Vue Composition API

通過(guò) Vue CLI 創(chuàng)建一個(gè)項(xiàng)目，將 Composition API 作為插件添加到 Vue 2 項(xiàng)目中。

$ vue create composition-api-form
$ cd composition-api-form
$ npm i -S @vue/composition-api

接下來(lái)，在 main.js 中加入這個(gè)插件

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');

創(chuàng)建輸入組件

為了使這個(gè)例子簡(jiǎn)單，我們將創(chuàng)建一個(gè)僅包含輸入名字和電子郵件的獨(dú)立的組件。

$ touch src/components/InputName.vue
$ touch src/components/InputEmail.vue

設(shè)置 InputName 組件模板，包括一個(gè) HTML 輸入元素，并使用 v-model 指令創(chuàng)建雙向綁定。

src/components/InputName.vue

設(shè)置表單

將添加 novalidate 屬性，讓瀏覽器知道我們將提供自定義驗(yàn)證。還將監(jiān)聽(tīng)表單的 submit 事件，防止表單自動(dòng)提交，并使用聲明的 onSubmit 方法處理該事件。

然后，添加 InputName 和 InputEmail 組件，并分別將本地狀態(tài)值 name 和 email 進(jìn)行綁定。

src/App.vue

接下來(lái)使用 Composition API 定義表單功能。在組件定義中添加 setup 方法，并使用 Composition API 提供的 ref 方法聲明兩個(gè)狀態(tài)變量 name 和 email。

然后聲明一個(gè) onSubmit 函數(shù)來(lái)處理表單提交。

src/App.vue

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

export default {
 name: "App",
 setup () {
  const name = ref("");
  const email = ref("");
  function onSubmit() {
   // 這里可以寫(xiě)提交后端的邏輯
   console.log(name.value, email.value);
  }
  return {
   name,
   email,
   onSubmit
  }
 },
 ...
}

設(shè)置輸入組件

接下來(lái)，將定義 InputName 組件的功能。

在組件上使用了 v-model 指令，就和組件創(chuàng)建了雙向綁定，在組件內(nèi)部的 props 上定義 value 來(lái)接收值，這只做了一半的工作。

創(chuàng)建一個(gè) setup 函數(shù)。props 和組件實(shí)例被傳遞到這個(gè)方法中，使我們能夠訪(fǎng)問(wèn)組件實(shí)例上的方法。

用解構(gòu)的方式在第二個(gè)參數(shù)中獲得 emit 方法。將需要它來(lái)完成 v-model 的雙向綁定的另一半工作，即觸發(fā) input 事件，修改綁定的值。

在此之前，聲明一個(gè)狀態(tài)變量 input，將綁定到我們?cè)谀０逯新暶鞯?HTML 元素上。

該變量的值是待定義的合成函數(shù) useInputValidator 執(zhí)行后返回的值。此函數(shù)將處理所有常見(jiàn)的驗(yàn)證邏輯。

把 prop.value 傳遞給這個(gè)方法作為第一個(gè)參數(shù)，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，接收經(jīng)過(guò)驗(yàn)證后的輸入值，在這個(gè)回調(diào)函數(shù)中觸發(fā) input 事件，修改 v-model 綁定的值，實(shí)現(xiàn)和父組件雙向綁定的功能。

src/components/InputName.vue

輸入框驗(yàn)證功能

開(kāi)始創(chuàng)建 useInputValidator 組合函數(shù)，為此，首先創(chuàng)建一個(gè) features 文件夾，然后為其創(chuàng)建一個(gè)模塊文件。

$ mkdir src/features
$ touch src/features/useInputValidator.js

在模塊文件中，將導(dǎo)出一個(gè)函數(shù)，它需要兩個(gè)參數(shù)： 從父表單接收到的值，用 startVal 接收;以及一個(gè)回調(diào)函數(shù)，用 onValidate 接收。

函數(shù)需要返回一個(gè) input 狀態(tài)變量，因此需要聲明它，通過(guò)調(diào)用 ref 并提供 startVal 的值進(jìn)行初始化。

在從函數(shù)返回 input 之前，觀察該值的變化，并調(diào)用 onValidate回調(diào)，傳入最新的 input 的值。

src/features/useInputValidator.js

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

export default function (startVal, onValidate) {
 let input = ref(startVal);
 watch(input, value => { 
  onValidate(value);
 });
 return {
  input
 }
}

添加驗(yàn)證器

下一步添加驗(yàn)證器函數(shù)。對(duì)于 InputName 組件，只有一個(gè)驗(yàn)證規(guī)則 minLength，確保輸入是三個(gè)字符或更多。尚未創(chuàng)建的 InputEmail 組件將需要電子郵件驗(yàn)證規(guī)則。

將在 src 文件夾中創(chuàng)建模塊 validators.js，并寫(xiě)這些驗(yàn)證器。在實(shí)際的項(xiàng)目中，您可能會(huì)使用第三方庫(kù)。

不會(huì)詳細(xì)介紹 validator 函數(shù)，但是有兩件重要的事情需要注意:

• 這些是返回函數(shù)的函數(shù)。這樣的結(jié)構(gòu)允許我們通過(guò)傳遞成為閉包一部分的參數(shù)來(lái)定制驗(yàn)證規(guī)則。
• 每個(gè)驗(yàn)證器返回的函數(shù)總是返回一個(gè)字符串(錯(cuò)誤消息)，如果沒(méi)有錯(cuò)誤，則返回 null。
   

src/validators.js

const minLength = min => {
 return input => input.length < min 
 ? `Value must be at least ${min} characters` 
 : null;
};

const isEmail = () => {
 const re = /\S+@\S+\.\S+/;
 return input => re.test(input)
 ? null
 : "Must be a valid email address";
}

export { minLength, isEmail };

回到上面的組合函數(shù)所在文件 useInputValidator.js 中，我們希望使用需要的驗(yàn)證，給函數(shù)添加另一個(gè)參數(shù)，它是一組驗(yàn)證函數(shù)。

在 input 監(jiān)視器內(nèi)部，使用數(shù)組的 map 方法調(diào)用驗(yàn)證函數(shù)，將 input 的當(dāng)前值傳遞給每個(gè)驗(yàn)證器方法。

返回值將在一個(gè)新的狀態(tài)變量 errors 中捕獲，也將返回給所在組件使用。

src/features/useInputValidator.js

export default function (startVal, validators, onValidate) {
 const input = ref(startVal);
 const errors = ref([]);
 watch(input, value => {
  errors.value = validators.map(validator => validator(value));
  onValidate(value);
 });
 return {
  input,
  errors
 }
}

最后回到 InputName 組件，現(xiàn)在將為 useInputValidator 方法提供必需的三個(gè)參數(shù)。
第二個(gè)參數(shù)現(xiàn)在是一個(gè)驗(yàn)證器數(shù)組，因此讓我們?cè)谶m當(dāng)?shù)牡胤铰暶饕粋€(gè)數(shù)組，并傳入 minLength 方法。

minLength 是一個(gè)工廠函數(shù)，調(diào)用并傳遞指定的最小長(zhǎng)度。

現(xiàn)在我們還從合成函數(shù)返回的對(duì)象獲取 input 和 errors，它們都將從 setup 方法返回，以便在組件中可用。

src/components/InputName.vue

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

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

這是我們將添加到該組件的最后一個(gè)功能。在我們繼續(xù)之前，花點(diǎn)時(shí)間對(duì)比一下這段代碼比使用mixin可讀性強(qiáng)得多。

首先，可以清楚地看到狀態(tài)變量在哪里聲明和修改，而不必切換到單獨(dú)的 mixin 模塊文件。另外，不需要擔(dān)心局部變量和復(fù)合函數(shù)之間的名稱(chēng)沖突。

顯示錯(cuò)誤

進(jìn)入 InputName 組件的模板，有潛在的錯(cuò)誤數(shù)組要顯示，將其委托給一個(gè)稱(chēng)為 ErrorDisplay 的組件來(lái)顯示錯(cuò)誤。

src/components/InputName.vue

ErrorDisplay 組件根據(jù)業(yè)務(wù)需要，可以自己定制。

重用代碼

這就是我們基于Composition API 寫(xiě)的表單的基本功能。本教程的目標(biāo)是創(chuàng)建清晰且可擴(kuò)展的表單代碼，通過(guò)定義 InputEmail 組件，來(lái)證明我們已經(jīng)做到了這一點(diǎn)。

src/components/InputEmail

看完上述內(nèi)容，是不是對(duì)使用Vue Composition API如何實(shí)現(xiàn)清晰、可擴(kuò)展的表單有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。