Vue.js与Jquery语言比较浅谈

Love The Way You Lie 2024-03-30 16:52 70阅读 0赞

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

1、[jquery][]：轻量级的js库

2、vue：前端js库，是一个精简的[MVVM][]，它专注于MVVM模型的viewModel层，通过双向数据绑定把view和model层连接起来，通过对数据的操作就可以完成对页面视图的渲染。

3、vue和jquery对比：

vue是通过vue对象将数据和view完全分离开的，对数据操作不在引用相应的DOM对象；主要是操作数据

jQuery是使用选择器（$）选取DOM对象，并对其进行赋值、取值、事件绑定等操作；主要是操作DOM

\---------------------

普遍认为jQuery是适合web初学者的起步工具。许多人甚至在学习jQuery之前，他们已经学习了一些轻量JavaScript知识。为什么？部分是因为jQuery的流行，但主要是源于经验开发人员的一个错误的理念：因为jQuery是简单的，所以对于初学者也很简单适合。jQuery提供了简洁，不简化jQuery确实克服了很多旧浏览器问题。但是，它在封装DOM API和JavaScript的复杂性上并没有做太多。键入 $(‘\#id’).click(function(event) \{..\}); 确实非常简短，但是你还是需要了解一些背景知识才能写这些代码：DOM节点选择，事件处理，回调等等。如果你已经理解了DOM API和JavaScript，jQuery是简单，但初学者不容易编写。Vue.jsVue.js是JavaScript镇上新来的小子。它的许多优势，易于学习可能是第一。简单已经内建于它的设计。我断言，初学者可以用VUE建立平常Web应用，并对他们如何工作了解得更清楚，特别是相比于他们使用jQuery构建一样的东西。让我们用jQuery和vue.js实施一个非常简单的应用程序，看看它是多么轻量。这个案例程序将计算一个按钮被点击的次数，并在屏幕上显示这个数字。

JQuery实现

<div id="output"></div> <button id="increment">Increment</button> var counter = 0; $(document).ready(function() \{ var $output = $("\#output"); $("\#increment").click(function() \{ counter++; $output.html(counter); \}); $output.html(counter); \});

它看起来很简单，但考虑到这只是因为你是从经验丰富的开发人员角度看。其实理解代码实际所做的原理是相当棘手的。想想：1. $(document).ready(function() \{ .. \});这这30个字符包含四个棘手的概念：DOM节点的选择、事件处理、文件的加载过程和回调。如果你没有学会所有这些东西，那么你不明白你刚才写的代码。2.要选择一个DOM元素实现操作并完成业务，你需要jQuery构造器$（"…"）。不幸的是，你不能确定到底你会得到什么节点，你需要使用CSS3-like选择器创建一个合适的过滤器，运行时才能确定。要做到这一点，你需要创建一个DOM复制和模拟运行你的滤波器会对它做些什么。当你编写更新DOM的每个方法时，你必须同样地更新你的DOM复制和考虑如果你的过滤器仍然如预期一样正常工作。3.JQuery只有一个模式：选择jQuery某样事情，然后从API的方法做你选择的事情。这一模式的问题是，我们现在有一个扁平的、有超过100个的方法，从AJAX到数组一维迭代。仅仅使用这么多方法的名称描述就能足以区分他们所做的和他们的返回的是不可能的。一个初学者理解这些串联在一起的方法是真的需要好运。

使用Vue.js实现：

<div id="app"> <div>\{ \{ counter \}\}</div> <button v-on:click="increment">Increment</button> </div> new Vue(\{ el: "\#app", data: \{ counter: 0 \}, methods: \{ increment() \{ this.counter++; \} \} \});

Vue已经解决了之前jQuery很多痛点：1.无需担心DOM回调，这种复杂性已经被封装。Vue的生命周期挂钩将允许更精确的控制，如果它需要。2.在数据属性counter和它渲染输出DOM节点之间有一个明显的之间的链接。无需心理DOM，你可以看到它在网页上有保证，更新计数器不会弄乱你的DOM以意想不到的方式由于摇晃的节点选择。不再需要DOM复制，你可以看到它在网页上，保证更新计数器时不会由于靠不住的节点选择以意想不到的方式弄乱你的DOM。3.我们没有模棱两可的API方法需要查找或记住。不同的功能被很好的组织和分层在Vue构造函数对象中，或能通过指令直接应用到模板中的DOM节点，这些指令提供更多的易于理解的上下文。因此，如果你已经理解JavaScript和DOM API，jQuery是容易。但这不是初学者的情况。因此，jQuery是不简单的，只是略微简单。另一方面，Vue简单内建到它的设计。对DOM API许多困难的部分进行了封装。初学者因此可以很快编写他们真正理解的代码，当他们需要做更复杂的东西，Vue也会提供给他们。所以下次有人问你，什么是他们作为一个网站开发人员初学者应该学会的，也许并不是jQuery。

[Link 1]: https://www.weidianyuedu.com/
[jquery]: https://so.csdn.net/so/search?q=jquery&spm=1001.2101.3001.7020
[MVVM]: https://so.csdn.net/so/search?q=MVVM&spm=1001.2101.3001.7020