php開發面試題---jquery和vue對比（整理）
一、總結
一句話總結：
jquery的本質是更方便的選取和操作DOM對象，vue的本質是數據和頁面分離
反思的回顧非常有用，因為決定了我的方向和技巧
以戰養己，這是非常非常好的方式
1、MVVM框架是什么？
Model-View-ViewModel：數據和視圖分離框架
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了，它可以取出 Model 的數據同時幫忙處理 View 中由於需要展示內容而涉及的業務邏輯。微軟的WPF帶來了新的技術體驗，如Silverlight、音頻、視頻、3D、動畫……，這導致了軟件UI層更加細節化、可定制化。同時，在技術層面，WPF也帶來了 諸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由來便是MVP（Model-View-Presenter）模式與WPF結合的應用方式時發展演變過來的一種新型架構框架。它立足於原有MVP框架並且把WPF的新特性糅合進去，以應對客戶日益復雜的需求變化。
2、為什么jquery和vue有可比性？
將原有的直接操作dom的思想轉變到分離數據和頁面
然而從jquery到vue或者說是到mvvm的轉變則是一個思想想的轉變，是將原有的直接操作dom的思想轉變到操作數據上去，難道不是一個根本性的改變嗎？
3、jquery介紹？
大量的其它js庫依賴於juqery
jquery使用率將降低：隨着瀏覽器廠商對HTML5規范統一遵循以及ECMA6在瀏覽器端的實現，jquery的使用率將會越來越低，jquery庫正在被替代
想必大家都用過jquery吧，這個曾經也是現在依然最流行的web前端js庫，可是現在無論是國內還是國外他的使用率正在漸漸被其他的js庫所代替，隨着瀏覽器廠商對HTML5規范統一遵循以及ECMA6在瀏覽器端的實現，jquery的使用率將會越來越低
4、vue介紹？
精簡的MVVM框架：Model-View-ViewModel
數據操作 完成 頁面渲染：它通過雙向數據綁定把 View 層和 Model 層連接了起來，通過對數據的操作就可以完成對頁面視圖的渲染。
快速，組合，緊湊，強大：vue以他獨特的優勢簡單，快速，組合，緊湊，強大而迅速崛起
vue是一個興起的前端js庫，是一個精簡的MVVM。從技術角度講，Vue.js 專注於 MVVM 模型的 ViewModel 層。它通過雙向數據綁定把 View 層和 Model 層連接了起來，通過對數據的操作就可以完成對頁面視圖的渲染。當然還有很多其他的mvmm框架如Angular，React都是大同小異，本質上都是基於MVVM的理念。 然而vue以他獨特的優勢簡單，快速，組合，緊湊，強大而迅速崛起
5、vue和jquey對比 ？
語法：jQuery是使用選擇器（$）選取DOM對象
數據和視圖組合方式：jquery合在一起，vue分開
jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象，而數據和界面是在一起的。比如需要獲取label標簽的內容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。
6、jquery的本質是什么？
更方便的選取和操作DOM對象：其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象
7、jquery和原生html的區別是什么？
更方便的選取和操作DOM對象：其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象
8、vue的本質是什么？
雙向數據綁定
數據和頁面的分離
9、jquery和vue分別適合的場景？
vue適用的場景：復雜數據操作的后台頁面，表單填寫頁面
jquery適用的場景：比如說一些html5的動畫頁面，一些需要js來操作頁面樣式的頁面
10、jquery為什么要和vue配合使用？
vue側重數據綁定，jquery側重樣式操作，動畫效果等，則會更加高效率的完成業務需求
二、jquery和vue對比
轉自或參考：jquery和vue對比
https://www.cnblogs.com/MR-YY/p/6898464.html
前言：很多人說jquey和vue沒有什么可比的，應該和Angular，React來比吧，我到覺得他們倒沒有多大的可比性，都是基於mvvm思想設計的框架，無非就是實現的方式不一樣，在不同場景下性能上會有一些差異。然而從jquery到vue或者說是到mvvm的轉變則是一個思想想的轉變，是將原有的直接操作dom的思想轉變到操作數據上去，難道不是一個根本性的改變嗎？
1.jquery介紹：想必大家都用過jquery吧，這個曾經也是現在依然最流行的web前端js庫，可是現在無論是國內還是國外他的使用率正在漸漸被其他的js庫所代替，隨着瀏覽器廠商對HTML5規范統一遵循以及ECMA6在瀏覽器端的實現，jquery的使用率將會越來越低
2.vue介紹：vue是一個興起的前端js庫，是一個精簡的MVVM。從技術角度講，Vue.js 專注於 MVVM 模型的 ViewModel 層。它通過雙向數據綁定把 View 層和 Model 層連接了起來，通過對數據的操作就可以完成對頁面視圖的渲染。當然還有很多其他的mvmm框架如Angular，React都是大同小異，本質上都是基於MVVM的理念。 然而vue以他獨特的優勢簡單，快速，組合，緊湊，強大而迅速崛起
3.vue和jquey對比
jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象，而數據和界面是在一起的。比如需要獲取label標簽的內容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。
4.舉例說明
場景一：列表添加一個元素,下圖為vue和jquery兩種操作的代碼，我們從中可以看出vue只需要向數據message里面push一條數據即可完成添加一個li標簽的操作，而jquery則需要獲取dom元素節點，並對dom進行添加一個標簽的操作，如果dom結構特別復雜，或者添加的元素非常復雜，則代碼會變得非常復雜且閱讀性低
vue:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul> <!--根據數組數據自動渲染頁面--> <li v-for="item in message">{{item}}</li> </ul> <button @click="add">添加數據</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: ["第1條數據","第2條數據"], i:2 }, methods:{ //向數組添加一條數據即可 add:function(){ this.i++ this.message.push("第"+this.i+"條數據") } } }) </script>
jquery:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul id="list"> <li>第1條數據</li> <li>第2條數據</li> </ul> <button id="add">添加數據</button> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var i=2; $('#add').click(function() { i++; //通過dom操作在最后一個li元素后手動添加一個標簽 $("#list").children("li").last().append("<li>第"+i+"條數據</li>") }); }); </script>
場景二：控制按鈕的顯示隱藏，下圖為vue和jquery兩種操作的代碼，我們從中可以看出vue只需要控制屬性isShow的值為true和false即可，而jquery則還是需要操作dom元素控制按鈕的顯示和隱藏
vue:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul> <!--根據數組數據自動渲染頁面--> <li v-for="item in message">{{item}}</li> </ul> <button @click="add" v-show="isShow">添加數據</button> <button @click="showButton">隱藏按鈕</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: ["第1條數據","第2條數據"], i:2, isShow:true }, methods:{ //向數組添加一條數據即可 add:function(){ this.i++ this.message.push("第"+this.i+"條數據") }, //控制isShow的值即可 showButton:function(){ this.isShow=false; } } }) </script>
jquery：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul id="list"> <li>第1條數據</li> <li>第2條數據</li> </ul> <button id="add">添加數據</button> <button id="showButton">隱藏按鈕</button> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var i=2; $('#add').click(function() { i++; //通過dom操作在最后一個li元素后手動添加一個標簽 $("#list").children("li").last().append("<li>第"+i+"條數據</li>") }); //需要手動隱藏dom元素 $("#showButton").click(function(){ $("#add").hide() }) }); </script>
輸出結果：
4.總結：內容講的比較淺，主要就是分析一下vue和jquey對比的區別，上面兩個例子只是做了一個簡單的說明，然而vue能解決的問題遠比這些要多的多，復雜的多。
vue適用的場景：復雜數據操作的后台頁面，表單填寫頁面
jquery適用的場景：比如說一些html5的動畫頁面，一些需要js來操作頁面樣式的頁面
然而二者也是可以結合起來一起使用的，vue側重數據綁定，jquery側重樣式操作，動畫效果等，則會更加高效率的完成業務需求
5. 附上公司前端目錄結構，感興趣的可以分享代碼給大家看看
src代碼目錄包含assets靜態文件，components vue組件文件，plugins 插件文件（包含登錄操作，http請求操作，過濾器，加解密操作，公共方法等），router 路由文件，store vuex文件，app.js vue相關配置，index.html主頁面
build目錄為webpack打包文件，dist目錄為打包后生成的文件，node_modules 引用的外部組件
