php開發面試題---jquery和vue對比（整理）

時間 2020-05-23

標籤 php 開發面試 jquery vue 對比整理欄目 PHP 简体版

原文原文鏈接

php開發面試題---jquery和vue對比（整理）

1、總結

一句話總結：

jquery的本質是更方便的選取和操做DOM對象，vue的本質是數據和頁面分離

反思的回顧很是有用，由於決定了個人方向和技巧

以戰養己，這是很是很是好的方式

一、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的新特性糅合進去，以應對客戶日益複雜的需求變化。php

二、爲何jquery和vue有可比性？

將原有的直接操做dom的思想轉變到分離數據和頁面

然而從jquery到vue或者說是到mvvm的轉變則是一個思想一想的轉變，是將原有的直接操做dom的思想轉變到操做數據上去，難道不是一個根本性的改變嗎？css

三、jquery介紹？

大量的其它js庫依賴於juqery

jquery使用率將下降：隨着瀏覽器廠商對HTML5規範統一遵循以及ECMA6在瀏覽器端的實現，jquery的使用率將會愈來愈低，jquery庫正在被替代

想必你們都用過jquery吧，這個曾經也是如今依然最流行的web前端js庫，但是如今不管是國內仍是國外他的使用率正在漸漸被其餘的js庫所代替，隨着瀏覽器廠商對HTML5規範統一遵循以及ECMA6在瀏覽器端的實現，jquery的使用率將會愈來愈低html

四、vue介紹？

精簡的MVVM框架：Model-View-ViewModel

數據操做完成頁面渲染：它經過雙向數據綁定把 View 層和 Model 層鏈接了起來，經過對數據的操做就能夠完成對頁面視圖的渲染。

快速，組合，緊湊，強大：vue以他獨特的優點簡單，快速，組合，緊湊，強大而迅速崛起

vue是一個興起的前端js庫，是一個精簡的MVVM。從技術角度講，Vue.js 專一於 MVVM 模型的 ViewModel 層。它經過雙向數據綁定把 View 層和 Model 層鏈接了起來，經過對數據的操做就能夠完成對頁面視圖的渲染。固然還有不少其餘的mvmm框架如Angular，React都是大同小異，本質上都是基於MVVM的理念。然而vue以他獨特的優點簡單，快速，組合，緊湊，強大而迅速崛起前端

五、vue和jquey對比？

語法：jQuery是使用選擇器（$）選取DOM對象

數據和視圖組合方式：jquery合在一塊兒，vue分開

jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。好比須要獲取label標籤的內容：$("lable").val();,它仍是依賴DOM元素的值。

Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。vue

六、jquery的本質是什麼？

更方便的選取和操做DOM對象：其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象

七、jquery和原生html的區別是什麼？

更方便的選取和操做DOM對象：其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象

八、vue的本質是什麼？

雙向數據綁定

數據和頁面的分離

九、jquery和vue分別適合的場景？

vue適用的場景：複雜數據操做的後臺頁面，表單填寫頁面

jquery適用的場景：好比說一些html5的動畫頁面，一些須要js來操做頁面樣式的頁面

十、jquery爲何要和vue配合使用？

vue側重數據綁定，jquery側重樣式操做，動畫效果等，則會更加高效率的完成業務需求

2、jquery和vue對比

轉自或參考：jquery和vue對比
https://www.cnblogs.com/MR-YY/p/6898464.htmlhtml5

前言：不少人說jquey和vue沒有什麼可比的，應該和Angular，React來比吧，我到以爲他們倒沒有多大的可比性，都是基於mvvm思想設計的框架，無非就是實現的方式不同，在不一樣場景下性能上會有一些差別。然而從jquery到vue或者說是到mvvm的轉變則是一個思想一想的轉變，是將原有的直接操做dom的思想轉變到操做數據上去，難道不是一個根本性的改變嗎？node

1.jquery介紹：想必你們都用過jquery吧，這個曾經也是如今依然最流行的web前端js庫，但是如今不管是國內仍是國外他的使用率正在漸漸被其餘的js庫所代替，隨着瀏覽器廠商對HTML5規範統一遵循以及ECMA6在瀏覽器端的實現，jquery的使用率將會愈來愈低jquery

2.vue介紹：vue是一個興起的前端js庫，是一個精簡的MVVM。從技術角度講，Vue.js 專一於 MVVM 模型的 ViewModel 層。它經過雙向數據綁定把 View 層和 Model 層鏈接了起來，經過對數據的操做就能夠完成對頁面視圖的渲染。固然還有不少其餘的mvmm框架如Angular，React都是大同小異，本質上都是基於MVVM的理念。然而vue以他獨特的優點簡單，快速，組合，緊湊，強大而迅速崛起 webpack

3.vue和jquey對比 web

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>