vue和jquery的对比

Posted 2020-11-25 lmm1010

  这一段时间在学vue，也被称为前端框架的三马车之一，是一套用于构建用户界面的渐进式框架，也是入门难度最低的一种框架。今天将vue和之前学的jquery来对比一下。

1. Jquery介绍：jquery是一个快速的，简洁的javascript框架，于2006年由John Resig发布，倡导的是写更少的代码，去做更多的事。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。简而言之，jquery就是一个JavaScript数据库，它里面封装了很多我们常用的dom操作，我们在使用jquery的时候只要引入jquery的cdn或类库就可以使用。像我们快速获取文档元素，页面的动态效果和ajax的无刷新页面的操作jquery都可以快速实现。
2. Vue介绍：Vue是一套用于构建用户界面的渐进式框架，是由我们中国的开发者尤玉溪一个人开发出来的，与其他大型框架不同的是Vue被设计为可以自底向上逐层应用，是一个新兴的前端js库，是一个精简的MVVM，Vue.js专注于MVVM模型的ViewModel层，它采用了虚拟dom，运行效率高，并且采用了组件化开发 ，开发效率高 ，Vue将开发者的精力从dom操作解放出来，转移到数据库上，所谓虚拟dom就是内存中的一个对象，该对象有一个特点就是和dom有相同的结构，但他仅仅修改内存中的数据，所以消耗的资源远远小于dom操作。

对比：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，和原生的HTML的区别只是在于可以更方便的选取和操作dom对象，并且数据和界面是在一起的，举个小例子，需要获得input中内容：$(“input”).val(),还是要依赖DOM元素的值。

而Vue则是和通过Vue对象将数据和View完全分离开来，对数据进行操作不在需要引入响应的DOM对象，可以说数据和View是分离开来的，通过Vue对象用vm去进行双向绑定。

举两个小例子：
1.jquery：

2.Vue：

 

 我们可以很明显的看到jquery还是需要获取dom元素节点，并对dom元素节点进行了一个写入的操作，如果dom结构很复杂，代码会变得非常复杂，并且可读性低，而vue中，只需要获取data，并在data中写入数据即可完成写入操作，代码结构一目了然。

总结：这只是两个很简单的例子，Vue还能解决更多更复杂的问题，我们可以根据不同的场合去选择使用，像vue更适合去操作一些复杂数据的后台页面，而一些需要js来操作页面样式的页面，我们用jquery会更适用一些。