從jQuery轉向Vue

作為一個使用了jQuery很多年 的人，最近，我成為了一個Vue的皈依者，我認為從一個框架到另一個框架的遷移過程將是一個值得討論的有趣的話題。

在我開始之前，我想清楚地說明一點。我並沒有以任何方式告訴任何人去停止使用jQuery。jQuery最近相當流行，而且見鬼，我幾年前也寫過類似的東西(“我如何(不)使用jQuery”)。如果你使用jQuery完成了你的項目，並且你的最終用戶成功地使用了你的站點，那麼你將獲得更多的動力去繼續使用對你有用的東西。

本指南更適合那些可能具有多年jQuery經驗並希望瞭解如何使用Vue來完成工作的人。考慮到這一點，我將重點介紹我所認為的“核心”jQuery用例。我不會涵蓋每一個可能的特性，而是用“我經常使用jQuery來完成 [X]”的方式來代替，這種方式可能更適合那些考慮學習Vue的人。(順便提一句，請注意，我編寫示例的方式只是執行一個任務的一種方式。jQuery和Vue都提供了多種方法來實現相同的目標，這是一件很棒的事情!)

記住了這一點，我們來思考一些可以使用jQuery完成的高級的東西:

• 在DOM中找到某些東西(稍後再用它做一些事情)
• 修改DOM中的某些東西(例如一個段落的文本或一個按鈕的類)
• 讀取和設置表單值
• 表單驗證(實際上是上面各項的一個組合)
• ajax調用和處理結果
• 事件處理(例如點擊按鈕，做某些事情)
• 測量或改變元素的樣式

當然，jQuery還有更多的功能，但是這些用途(至少在我看來)涵蓋了最常見的用例。還要注意，在上面的列表中有很多異花授粉現象。那麼，我們應該從簡單的一一對應的比較開始嗎?不，沒那麼快。我們先從介紹Vue應用程序中的主要差異開始。

#定義Vue的使用場景

當我們將jQuery加入到頁面上時，我們基本上是在JavaScript代碼中添加一把瑞士軍刀來處理常見的web開發任務。我們可以按照我們認為合適的順序來處理任何一個用例。例如，今天客戶可能會要求表單驗證，然後在一個月左右後，又要求在站點的頭部添加一個基於Ajax的搜索表單。

Vue在這方面有一個顯著的不同。當使用Vue開始一個項目時，我們首先會在DOM中定義一個我們希望Vue專用的“區域”。因此，我們來考慮一個簡單的原型web頁面:

在一個典型的jQuery應用程序中，我們可以編寫代碼來處理頭部、側邊欄和登錄表單等。這很簡單:

而在一個Vue應用程序中，我們首先需要指定要處理的內容。假設我們的客戶首先要求我們向loginForm元素添加驗證，那麼我們的Vue代碼就要指定這一點:

這意味著，如果客戶後來決定讓我們在側邊欄中添加一些內容，那我們通常會添加第二個Vue應用程序:

這是件壞事嗎?絕對不是。我們馬上就會得到封裝的好處。如果我們不小心使用了一個具有泛型名稱的變量(我們都這樣做過)，我們不必擔心它與代碼的其他部分發生衝突。過後，當客戶端增加了另一個要求時，像這樣將我們獨特的、邏輯化的Vue代碼集區分開就會確保每一個Vue應用程序不會相互干擾。

所以，是的，這是一件好事。但當我第一次開始使用Vue時，它絕對讓我停了下來。現在，進入我們的用例。

#在DOM中查找東西

你會發現另一個有趣或可怕的方面是如何“在DOM中查找東西”。這有點模糊，但我們來考慮一個強有力的例子。我們有一個按鈕，當它被點擊時，我們讓一些事情發生。下面是一個簡短的例子，展示了它是怎樣的:

現在我們來將這個例子與用Vue的實現方式進行比較:

這個Vue應用程序有點冗長，但是請注意標記是如何在操作(“click”)和將要調用的函數之間建立一個直接連接的。Vue的代碼並沒有與DOM進行向後綁定(我們在el部分之外定義了它需要運行的地方)。這是Vue最吸引我的地方之一——它能很容易地告訴你將要發生什麼。此外，我不需要過多地擔心ID值和選擇器。如果我更改了按鈕的類或ID，我不需要返回代碼中去更新選擇器。

我們來考慮另一個例子:在DOM中查找和更改文本。想象一下那個按鈕，單擊它，現在會更改DOM的另一部分的文本。

我已經添加了一個新的span，現在，當按鈕被單擊時，我們使用另一個選擇器來查找它，並使用一個jQuery工具方法來更改其中的文本。現在我們來考慮一下Vue版本:

在本例中，我們使用Vue的模板語言(突出顯示的行)來指定我們希望在span中呈現的一個變量，在本例中是resultText。現在，當按鈕被單擊時，我們更改該值，span的內部文本將會自動更改。

順便說一句，Vue支持v-on屬性的簡寫，因此示例中的按鈕可以用@click=“ doSomething"代替。

#讀寫表單變量

處理表單可能是我們可以用JavaScript做的最常見也是最有用的事情之一。甚至在JavaScript之前，我早期的“web開發”大部分都是通過編寫Perl腳本來處理表單提交。作為接受用戶輸入的主要方式，表單對web來說一直都是很重要的，而且很可能會在相當長一段時間內保持不變。我們來考慮一個簡單的jQuery例子，它將讀取幾個表單字段並設置另一個:

這段代碼演示了jQuery如何通過val( )方法讀寫表單。最後，我們從DOM中獲取四個項目(所有的三個表單字段和一個按鈕)，並使用簡單的數學方法來生成一個結果。現在我們來考慮一下Vue版本:

這裡介紹了一些有趣的Vue快捷方法。首先，v-model是Vue如何在DOM和JavaScript中的值之間創建雙向數據綁定。data塊變量將自動與表單字段同步。更改數據，表單就會更新。更改表單，數據就會更新。.number是Vue的一個標誌，用於將表單字段的繼承字符串值視為數字。如果我們不做這一步，按原樣做加法，我們會看到字符串加法，而不是算術。我已經使用JavaScript處理了將近一個世紀了，但還是搞砸了。

另一個簡單的“技巧”是@click.prevent。首先，@click為按鈕定義了一個單擊處理程序，然後.prevent部分會阻止瀏覽器提交表單的默認行為(相當於event.preventDefault( ))。

最後一個是綁定到該按鈕的doSum方法進行的相加操作。注意，它只處理數據變量(Vue在this作用域內允許對這些變量進行操作)。

雖然這主要是我個人的感覺，但我非常喜歡在用Vue編寫腳本時，腳本中沒有查詢選擇器，以及HTML如何更清楚地顯示它在做什麼。

最後，我們甚至可以完全去掉按鈕:

Vue的一個更酷的特性是computed properties（計算屬性）。它們是虛擬值，可以識別其派生值何時被更新。在上面的代碼中，只要兩個表單字段中的任何一個發生更改，總和就會更新。這也適用於表單字段之外。我們可以這樣渲染其總和:

#使用Ajax

值得稱讚的是，jQuery使Ajax的使用變得非常簡單。事實上，我可以說我已經以一種“普通”的方式完成了Ajax，可能總共只有一次（如果你對此很好奇，你可以查看XMLHttpRequest規範，並且你可能會為你已經避免了它而感到高興）。jQuery簡單的$.get(…)方法在很多情況下都能工作，並且當它需要在更復雜的東西中使用時，$.ajax()也能使它變得簡單。jQuery做得很好的另一件事是它處理JSONP請求的方式。雖然現在使用CORS基本上沒有必要，但JSONP是一種處理向不同域中的API發出請求的方法。

那麼，Vue如何讓Ajax變得更簡單呢?沒有什麼!

好吧，聽起來很嚇人，但其實並不可怕。有許多處理HTTP請求的選項，而Vue.js採用了一種更不可知的方式，讓我們開發人員決定如何處理它。所以，是的，這確實意味著更多的工作，但我們有一些不錯的選擇。

首先應該考慮的是Axios，這是一個Promise-based庫，在Vue社區中非常流行。下面是一個使用它的簡單的例子(摘自它們的README文件):

Axios支持POST請求，當然，它也允許我們在許多其他選項中指定頭文件。

雖然Axios在Vue開發人員中非常流行，但我並不是真心喜歡它。(至少現在還沒有。)相反，我更喜歡Fetch。Fetch不是一個外部庫，而是執行HTTP請求的一種web標準方法。Fetch在大約90%的瀏覽器

上都有很好的支持，雖然這意味著使用它並不完全安全，但是我們總是可以使用一個我們需要的polyfill。

雖然這完全超出了我們在這裡討論的範圍，但是Kingsley Silas寫了一本關於在React中使用Axios和Fetch的優秀指南。

和Axios一樣，Fetch也是Promise-based的，並且有一個友好的API:

Axios和Fetch都涵蓋了所有類型的HTTP請求，所以它們都能滿足任意數量的需求。讓我們看一個簡單的比較。下面是一個使用了星球大戰API的簡單jQuery演示。

在上面的示例中，我使用$.get調用該API並返回一個電影列表。然後我用這些數據生成一個標題列表作為 li 標記元素，並將其全部插入到一個ul塊中。

現在，讓我們考慮一個使用Vue的例子:

其中最好的部分可能是使用v-for模板。注意Vue是如何做到與佈局無關的(至少與JavaScript無關)。數據是從該API中獲取的。它被分配了一個變量。佈局處理如何顯示它。我一直討厭在我的JavaScript中使用HTML，但是jQuery提供瞭解決方案，把它嵌入到Vue中看起來就很自然很合適。

#一個完整的（在某種程度上有點瑣碎）例子

為了更好地理解它，讓我們考慮一個更真實的例子。我們的客戶要求我們為一個產品API構建一個支持Ajax的前端搜索接口。功能列表包括:

• 支持按名稱和產品類別進行過濾
• 我們必須提供搜索項或類別的表單驗證
• 當API被點擊時，向用戶顯示一條消息並禁用提交按鈕
• 完成後，對未顯示產品進行報告或列出匹配項

我們從jQuery版本開始。首先, HTML部分如下:

有一個帶有兩個過濾器和兩個div的表單。一個用做搜索或報告錯誤時的臨時狀態，另一個用於呈現結果。現在，檢查代碼。

代碼首先為要處理的每個DOM項(表單字段、按鈕和div)創建一組變量。代碼的邏輯核心在按鈕的點擊處理程序中。我們進行驗證，如果一切正常，就對該API執行一個POST請求。當請求返回時，我們要麼呈現結果

，要麼在沒有匹配的情況下顯示消息。

你可以使用下面的CodePen來運行這個演示的完整版本。

現在讓我們考慮Vue版本。同樣，我們先從佈局開始:

從頂部看，其中的變化包括:

• 用一個div包裝佈局，可以讓Vue知道在哪裡運行。
• 對錶單字段使用v-model，以便它能輕鬆處理數據。
• 使用@click.prevent處理執行主搜索操作。
• 使用 :disabled 在這個Vue應用程序中將按鈕綁定到一個值，無論按鈕是否禁用 (我們稍後將看到它的實際操作)。
• 狀態值與前面的示例稍有不同。jQuery有一個特定的方法來設置DOM項中的文本和HTML中的文本，而Vue在將HTML分配給要呈現的值時需要使用v-html。如果我們在HTML中直接編寫{{status}}，標籤將被轉義。
• 最後，使用v-if條件性地呈現結果列表，同時使用v-for來處理迭代。

現在讓我們看看代碼。

值得調用的第一個塊是data字段集。有些映射到表單字段，有些映射到結果、狀態消息等等。searchProducts方法處理的內容與jQuery版本大致相同，但通常直接綁定到DOM的代碼要少得多。例如，即使我們知道結果是以一個無序列表列出的，但代碼本身並不關心這一點。它只是進行賦值，標記才處理呈現值。總的來說，與jQuery代碼相比，JavaScript代碼更關心邏輯，jQuery代碼“感覺”是更好的分離了關注點。

和以前一樣，這裡有一個CodePen可以讓你自己試試:

#jQuery將死! Vue萬歲!

好吧，這有點過分了。正如我在開始時所說的，如果你喜歡使用jQuery並且它對你有用的話，那我覺得你完全沒必要更改任何東西。

不過，我想說的是，對於習慣使用jQuery的人來說，Vue似乎是一個很好的“下一步”。Vue支持複雜的應用程序，併為搭建和構建項目提供了一個非常棒的命令行工具。但是對於更簡單的任務來說，Vue是一個很棒的“現代jQuery”的替代品，它已經成為我開發的可選工具!

有關使用Vue替代jQuery的另一個觀點，請查看Sarah Drasner的“使用Vue.js替換jQuery:無需構建步驟”，因為它包含了其他一些超級有用的例子。

英文原文：https://css-tricks.com/making-the-move-from-jquery-to-vue/

譯者：浣熊君( ･᷄৺･᷅ )