VUE（現代庫） VS jquery（傳統庫）

 

衆所周知最近幾年前端發展很是的迅猛，除各類框架如：backbone、angular、reactjs外，還有模塊化開發思想的實現庫：sea.js 、require.js 、webpack以及 前端上線部署集成工具如： grunt、gulp、fis等。

 

本文就新型mvvm庫：vue.js 與傳統庫jquery總結下二者 開發思路的區別。

jquery曾經是web前端最流行的庫（如今也是）， 但不管國內仍是國外其使用率漸漸的被其餘庫或框架佔據；隨着瀏覽器廠商對HTML5規範統一遵循以及ECMA6在瀏覽器端的實現，jq的使用率將會愈來愈低；（更詳細論述請參考賀老師的答案：jQuery會過期嗎？ - JavaScript）如下是國外各種前端庫使用狀況的小調查：

固然本文的重點不是討論JQ是否過期，本身用mvvm類框架一年有餘；針對很多剛學Angular 或 vue 的同窗在寫邏輯代碼時仍然使用jquery思惟的狀況， 本文作個小總結： 方便前端同窗明白mvvm庫的開發思路及理清我的對兩類庫的理解，經過幾個常見場景梳理下傳統庫 jquery 與現代新晉mvvm庫 vue 在實現相同邏輯時的思路區別； 與本人其餘博文同樣，本文包括 代碼、說明圖以及demo。

 

場景1： 註冊帳號：

本場景主要體現一個頁面多個步驟的邏輯處理， 相似的場景包括：購買流程、商品購買預定流程等；

註冊帳號設計圖以下：

1.1. JQ實現方式：

如貼代碼， 那本文將被代碼徹底佔據， 因此代碼部分以連接方式附上； jq 的實現思路以下：選擇 流程dom對象， 點擊按鈕隱藏當前活動流程dom對象，顯示下一流程dom對象。

實現思路圖：

代碼： 註冊流程小demo(jq)

1.2.VUE實現方式：

與jq不一樣 mvvm框架基本不操做dom節點， 雙向綁定使 dom節點跟變量綁定後， 經過修改變量的值控制dom節點的各種屬性。因此其實現思路爲： 視圖層使用一變量控制dom節點顯示與否，點擊按鈕則改變該變量。

實現思路圖：

代碼： 註冊流程小demo（vue）

場景2： 購物列表：

本場景主要體現界面交互較多的邏輯處理， 相似的場景包括： 用戶資料填寫（城市、性別點選）、ERP工單申請（申請類型點選）等；

PS: 實際項目中的電商網站不會將購物車、訂單結果單頁面顯示；由於這樣很差兼容也不安全， 於是本例只是提供一種多交互的場景：

購物列表設計圖以下：

2.1.JQ實現方式：

jquery 主要考慮 勾選、增長、減小、編輯 商品時對應的邏輯， 對這四種操做賦予不一樣的事件（點擊、失去焦點）；全部事件圍繞總價格變化， 故公共事件就是修改價格顯示的dom節點；

點擊「去支付」按鈕時， 遍歷商品列表節點而後顯示已勾選的商品；

實現思路圖：

代碼：註冊流程小demo（jq）

2.2.VUE實現方式：

實現與上述jq同樣的功能， 在不操做dom節點的狀況下vue如何實現呢？商品列表固然是使用v-repeat 遍歷實現展現，主要難點在於如何交互： 勾選、增長、減小商品數量時如何改變總價格？ 這時就用到了對象數組的深度監聽（具體實現請參見代碼）

使用一新數組存儲選中商品，點擊「去支付」按鈕時， 直接（v-repeat方式）顯示該新數組便可。

實現思路圖：

代碼：註冊流程小demo(vue)

場景3：表單提交：

本場景主要在於mvvm框架如何動態添加新dom節點；

以前有知友提過相似問題：

angular js的點擊一個li標籤，觸發事件添加li標籤或者添加div應該怎麼寫？ - 前端開發

看到題目時本文場景3正在構思，代碼還沒有完成，因此沒來得及回答；本文寫到該部分時，其問題已關閉！ (๑°ㅁ°๑)‼

高票答案已經用文字清楚的說明該場景下的代碼思路：

著做權歸做者全部。
商業轉載請聯繫做者得到受權，非商業轉載請註明出處。
做者：徐飛
連接：angular js的點擊一個li標籤，觸發事件添加li標籤或者添加div應該怎麼寫？ - 徐飛的回答
來源：知乎

思惟要轉變一下啊，用這類框架，要這樣想，不考慮特殊狀況：

1. 全部的界面事件，都是隻去操做數據的
2. 全部界面的變更，都是根據數據自動綁定出來的

這樣，你用一個數據（根據實際狀況，多是數組，界面上的li使用ng-repeat綁定這個數組，而後，ng-click事件裏，往這個數組中加一條數據），寫一下試試。
上面那兩條要牢記，尤爲是之前用過jQuery的人，要時刻注意：界面不是被你的事件改變的，事件只須要改變數據，界面是數據的實時反饋。

VUE.JS 的代碼思路跟angular.js能夠說一脈相承， 廢話很少，栗子說明：

表單提交設計圖：

3.1.JQ實現方式：

jq實現思路很簡單： 監聽「新增」按鈕點擊事件，而後生成dom節點，插入到表單父類節點中。點擊「提交」按鈕時，遍歷全部表單，從表單中獲取用戶填寫的數據便可；

（PS: 本部分代碼中沒細化用戶交互，表單提交時判空處理、表單項手機格式、身份證格式校驗等均沒實現）

實現思路圖：

代碼：表單操做(jq)

 

3.2.VUE實現方式：

mvvm框架相對於jq給使用者感觸最深的或許就是表單， 不管是vue仍是angularjs在表單的處理上都有不少特定的官方指令；能夠去官網感覺下： vue表單用法；

因此說mvvm框架最適合作erp類型單頁面應用， 一來不用管seo, 二來開發效率極高；

vue實現思路跟場景2差很少， v-repeat雙向綁定；只要給綁定的數組添加新數據；對應的dom節點就會對應變化， 點擊「提交」按鈕時，直接展現該數組便可；

（表單操做時，vue對比jq優點就比較明顯了，少了操做dom代碼； 開發、維護效率都會明顯提升）

實現思路圖：

代碼：表單操做(vue)

 

本文對應github代碼

參考資料：

VUE api

jQuery API 1.11 中文文檔