眾所周知最近幾年前端發(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的使用率將會越來越低鳞贷；（更詳細論述請參考賀老師的答案：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: 本部分代碼中沒細化用戶交互，表單提交時判空處理饿凛、表單項手機格式狞玛、身份證格式校驗等均沒實現(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ā)桦沉、維護效率都會明顯提高）
實現(xiàn)思路圖：
代碼：表單操作(vue)
