Vue.js比jQuery更好学

发表于 | 分类于

原文链接：https://medium.com/js-dojo/vue-js-is-easier-to-learn-than-jquery-abbbb9c12cf8

大家普遍认为，对于新手web程序员来说，jQuery被认为是一个好的入门点，甚至于很多程序员都是先学jQuery，再学原生Javascript。

为什么呢？首先是因为jQuery非常流行，但更重要的是，有经验的程序员都认为jQuery十分简单，推己及人，对于新手来说当然也应该是非常简单的，然而这并不正确。

jQuery简洁，但不简单。

jQuery绝对可以帮你处理掉很多老浏览器的麻烦事（译者注：比如各种兼容性问题），但对于简化DOM API操作和封装Javascript变化而言，它就帮不上什么忙了。

当然，对于敲 $(‘#id’).click(function(event) {..}); 这样代码的时候，肯定比原生的Javascript要简洁。但一些知识你是必须要掌握的，比如DOM选择器，事件处理，回调函数等等，不然你可写不出上述的代码。

jQuery能让你更简单地写代码，前提是你懂得DOM API和Javascript的相关知识，但这对新手来说并不容易。

Vue.js

Vue.js是Javascript世界的新宠，我几乎可以说它是最好学的。简约之道，深入其中。

我坚信，当一名新手使用Vue.js编写完一个简单的应用后，会比他使用jQuery（编写同一应用）更好地理解代码是如何工作的。

那么，让我们一起动手，分别用Vue.js和jQuery编写一个相同的简单应用，看看那个更好理解。这个应用会计算点击按钮的次数，并显示在显示出来。

使用jQuery编写

以下是使用jQuery编写的典型例子：

1
2
<div id="output"></div>
<button id="increment">Increment</button>
1
2
3
4
5
6
7
8
9
10
11
<script>
  var counter = 0;
  $(document).ready(function() {
    var $output = $('#output');  
    $('#increment').click(function() {
      counter++;
      $output.html(counter);
    });
    $output.html(counter);
  });
</script>

看起来挺简单的，但这只是因为你是个经验丰富的程序员。如果要搞清楚代码是怎么工作的，还是挺复杂的，不信你看：

  1. 在使用jQuery编程的时候，脚本中首先输入的是$(document).ready(function() { .. }); 。在这三十来个字母的代码中，如果你不知道以下这四个概念其中之一，你一定浑身难受而且不懂为什么代码能工作。1.DOM节点选择器。2.事件处理。3.文档加载过程。4.回调函数。

  2. 当需要选择一个DOM元素的时候，你要使用jQuery的构造器$(‘…’)。然而不幸的是你无法确切地指出获取到的是什么节点，你需要使用一个像CSS3选择器一样的过滤器，才能保证代码运行时（获取的DOM节点）是你想要的。为了更好的完成这工作，你需要在脑海中模拟出DOM节点并模拟出你通过选择器选取时会发生什么。当你写的任一个方法更新DOM元素时，你也需要在脑海中模拟出那节点到底怎么更新，并确定这个选择器还能如期工作。

  3. 由于一些因素的考虑，jQuery只可以使用一种模式：选择某些东西，通过API方法去操作被选择的东西。但这种模式存在问题。jQuery有超过100种方法去应对不同的业务场景，如处理AJAX、数组遍历等，但这些API都是一维平面的（译者注：其实就是吐槽jQuery的API名称过分简洁，不分层），这些方法的名称不可能一眼就可以看出它的用途及其返回值。祝新手们好运吧，希望他们能理解这些方法到底要如何使用。

使用Vue.js编写

以下是使用Vue.js编写的典型例子：

1
2
3
4
<div id="app">
  <div>{{ counter }}</div>
  <button v-on:click="increment">Increment</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() { 
        this.counter++;
      }
    }
  });
</script>

Vue.js解决了上述jQuery的很多痛点：

  1. 不需要考虑文档加载后才能执行回调函数，其中的各种复杂性已被Vue.js隐藏起来。如果你需要更精细的操作，可以使用Vue.js生命周期函数提供的相应钩子。

  2. data属性中的counter会与DOM节点相互关联（译者注：即数据驱动），counter产生变化时DOM节点会被重新渲染。不再需要在脑袋中记着DOM了，（当点击按钮时，）你会肯定页面中的计数器会被更新，不会出错，而不必担心由于使用了靠不住（jQuery）选择器导致出现的莫名其妙错误。

  3. 我们不需要去查找或者回忆那些模棱两可的API方法。在Vue.js的构造对象中，不同的功能被分层组织，一目了然，或者是通过指令给予更多的上下文，更好地理解DOM节点在模板中是如何工作的。

啰嗦太多了，总结如下：

如果你熟悉原生Javascript与DOM API操作，jQuery确实会更容易。但这对新手来说并不可能。jQuery简洁，但不简单。

另一方面，Vue，简约之道，深入其中。DOM API中许多难的部分都被封装起来了。新手可以写出他们真正能懂的代码，而当他们想写出更复杂的代码时，Vue也是支持的。

所以当下次有人问你，新手web程序员该学什么的时候，jQuery可不一定是个好答案。