详解jquery和vue对比

程序员文章站 2022-04-29 13:37:36

前言：很多人说jquey和vue没有什么可比的，应该和angular，react来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不...

前言：很多人说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>

详解jquery和vue对比

场景二：控制按钮的显示隐藏，下图为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>

输出结果：

详解jquery和vue对比