眾所周知最近幾年前端發(fā)展非常的迅猛，除各種框架如：backbone、angular、reactjs外，還有模塊化開發(fā)思想的實現(xiàn)庫：sea.js 、require.js 、webpack以及 前端上線部署集成工具如： grunt、gulp、fis等。本文就新型mvvm庫：vue.js 與傳統(tǒng)庫jquery總結(jié)下兩者開發(fā)思路的區(qū)別。
jquery曾經(jīng)是web前端最流行的庫（現(xiàn)在也是）， 但無論國內(nèi)還是國外其使用率漸漸的被其他庫或框架占據(jù)；隨著瀏覽器廠商對HTML5規(guī)范統(tǒng)一遵循以及ECMA6在瀏覽器端的實現(xiàn)，jq的使用率將會越來越低；（更詳細(xì)論述請參考賀老師的答案：jQuery會過時嗎？ - JavaScript）以下是國外各類前端庫使用情況的小調(diào)查：
當(dāng)然本文的重點不是討論JQ是否過時，自己用mvvm類框架一年有余；針對不少剛學(xué)Angular 或 vue 的同學(xué)在寫邏輯代碼時仍然使用jquery思維的情況， 本文做個小總結(jié)： 方便前端同學(xué)明白mvvm庫的開發(fā)思路及理清個人對兩類庫的理解，通過幾個常見場景梳理下傳統(tǒng)庫 jquery 與現(xiàn)代新晉mvvm庫 vue 在實現(xiàn)相同邏輯時的思路區(qū)別； 與本人其他博文一樣，本文包括 代碼、說明圖以及demo。
場景1： 注冊賬號：
本場景主要體現(xiàn)一個頁面多個步驟的邏輯處理， 類似的場景包括：購買流程、商品購買預(yù)約流程等；
注冊賬號設(shè)計圖如下：
1.1. JQ實現(xiàn)方式：
如貼代碼， 那本文將被代碼完全占據(jù)， 所以代碼部分以鏈接方式附上； jq 的實現(xiàn)思路如下：選擇 流程dom對象， 點擊按鈕隱藏當(dāng)前活動流程dom對象，顯示下一流程dom對象。
實現(xiàn)思路圖：
代碼： 注冊流程小demo(jq)
1.2.VUE實現(xiàn)方式：
與jq不同 mvvm框架基本不操作dom節(jié)點， 雙向綁定使 dom節(jié)點跟變量綁定后， 通過修改變量的值控制dom節(jié)點的各類屬性。所以其實現(xiàn)思路為： 視圖層使用一變量控制dom節(jié)點顯示與否，點擊按鈕則改變該變量。
實現(xiàn)思路圖：
代碼： 注冊流程小demo（vue）
場景2： 購物列表：
本場景主要體現(xiàn)界面交互較多的邏輯處理， 類似的場景包括： 用戶資料填寫（城市、性別點選）、ERP工單申請（申請類型點選）等；
PS: 實際項目中的電商網(wǎng)站不會將購物車、訂單結(jié)果單頁面顯示；因為這樣不好兼容也不安全， 因而本例只是提供一種多交互的場景：
購物列表設(shè)計圖如下：
2.1.JQ實現(xiàn)方式：
jquery 主要考慮 勾選、增加、減少、編輯 商品時對應(yīng)的邏輯， 對這四種操作賦予不同的事件（點擊、失去焦點）；所有事件圍繞總價格變化， 故公共事件就是修改價格顯示的dom節(jié)點；
點擊“去支付”按鈕時， 遍歷商品列表節(jié)點然后顯示已勾選的商品；
實現(xiàn)思路圖：
代碼：注冊流程小demo（jq）
2.2.VUE實現(xiàn)方式：
實現(xiàn)與上述jq一樣的功能， 在不操作dom節(jié)點的情況下vue如何實現(xiàn)呢？商品列表當(dāng)然是使用v-repeat 遍歷實現(xiàn)展示，主要難點在于如何交互： 勾選、增加、減少商品數(shù)量時如何改變總價格？ 這時就用到了對象數(shù)組的深度監(jiān)聽****（具體實現(xiàn)請參見代碼）
使用一新數(shù)組存儲選中商品，點擊“去支付”按鈕時， 直接（v-repeat方式）顯示該新數(shù)組即可。
實現(xiàn)思路圖：
代碼：注冊流程小demo(vue)
場景3：表單提交：
本場景主要在于mvvm框架如何動態(tài)添加新dom節(jié)點；
之前有知友提過類似問題：
angular js的點擊一個li標(biāo)簽，觸發(fā)事件添加li標(biāo)簽或者添加div應(yīng)該怎么寫？ - 前端開發(fā)
看到題目時本文場景3正在構(gòu)思，代碼尚未完成，所以沒來得及回答；本文寫到該部分時，其問題已關(guān)閉！ (?°?°?)?
高票答案已經(jīng)用文字清楚的說明該場景下的代碼思路：
著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
作者：
徐飛鏈接：angular js的點擊一個li標(biāo)簽，觸發(fā)事件添加li標(biāo)簽或者添加div應(yīng)該怎么寫？ - 徐飛的回答
來源：知乎
思維要轉(zhuǎn)變一下啊，用這類框架，要這樣想，不考慮特殊情況：
1.所有的界面事件，都是只去操作數(shù)據(jù)的
2.所有界面的變動，都是根據(jù)數(shù)據(jù)自動綁定出來的
這樣，你用一個數(shù)據(jù)（根據(jù)實際情況，可能是數(shù)組，界面上的li使用ng-repeat綁定這個數(shù)組，然后，ng-click事件里，往這個數(shù)組中加一條數(shù)據(jù)），寫一下試試。上面那兩條要牢記，尤其是以前用過jQuery的人，要時刻注意：界面不是被你的事件改變的，事件只需要改變數(shù)據(jù)，界面是數(shù)據(jù)的實時反饋。
VUE.JS 的代碼思路跟angular.js可以說一脈相承， 廢話不多，栗子說明：
表單提交設(shè)計圖：
3.1.JQ實現(xiàn)方式：
jq實現(xiàn)思路很簡單： 監(jiān)聽“新增”按鈕點擊事件，然后生成dom節(jié)點，插入到表單父類節(jié)點中。點擊“提交”按鈕時，遍歷所有表單，從表單中獲取用戶填寫的數(shù)據(jù)即可；
（PS: 本部分代碼中沒細(xì)化用戶交互，表單提交時判空處理、表單項手機(jī)格式、身份證格式校驗等均沒實現(xiàn)）
實現(xiàn)思路圖：
代碼：表單操作(jq)
3.2.VUE實現(xiàn)方式：
mvvm框架相對于jq給使用者感觸最深的或許就是表單， 無論是vue還是angularjs在表單的處理上都有很多特定的官方指令；可以去官網(wǎng)感受下： vue表單用法；
所以說mvvm框架最適合做erp類型單頁面應(yīng)用， 一來不用管seo, 二來開發(fā)效率極高；
vue實現(xiàn)思路跟場景2差不多， v-repeat雙向綁定；只要給綁定的數(shù)組添加新數(shù)據(jù)；對應(yīng)的dom節(jié)點就會對應(yīng)變化， 點擊“提交”按鈕時，直接展示該數(shù)組即可；
（表單操作時，vue對比jq優(yōu)勢就比較明顯了，少了操作dom代碼； 開發(fā)、維護(hù)效率都會明顯提高）
實現(xiàn)思路圖：
代碼：表單操作(vue)
