从jQuery到Vue.js，编程思维怎样转换？

一、jQ只是一个库，Vue是个框架

jQ只是将原生代码封装成一个库，而Vue的实现比jQ复杂的多，而且Vue是框架，除了行为，还需要负责内容和样式。

二、jQuery是事件驱动，Vue.js是数据驱动

很多时候，使用jQ的代码就是给元素绑定一堆事件，就OK了。但是Vue.js是以数据变化为驱动，你的主要工作是改变数据。

三、jQ是程序员主要操作DOM，Vue是避免程序员操作DOM

jQ经常干的事情是把DOM的元素改来改去，变来变去，但是Vue的原则是最小化修改DOM，尽量只修改数据，Vue自己负责修改DOM。

四、jQ没有组件的概念，Vue的组件概念很重要

jQ认为它可以操纵全页面，所以任何一段html代码和一段css代码都不可能只属于某一段jq代码。而Vue则有组件的概念，一个组件文件，通常是一个.vue文件内，会有一段js，一段html，以及一段css。

五、jQ的大部分代码只是原生js的封装，Vue则复杂得多

jQ的大部分代码，比如选择器，比如.show()、.hide()、$.ajax()等等，有时候jQ一行能搞定的，原生JS三四行也能搞定，所以jQ主要是封装的作用。而Vue就不会让你这么简单的几行代码就搞定，因为Vue不是原生JS的行为封装。
所以如果只是比较两者实现弹出alert('OK')谁的代码更简单，当然是jQ。

六、jQ是非响应式的，Vue是响应式的，这也是Vue的强大之处

比如一个外卖页面，用户将一个商品加入购物车，那么，页面下方的总价位置，就要做对应的计算。如果是用jQ，你就需要去监听用户的点击“加号”的操作，然后去修改页面下方显示的总价。然后根据配送费的不同，总价又会变来变去，你就要给用户的N种可能操作都要分别绑上事件，事件中都要处理页面最下方的总价的显示。然而，如果是用Vue，你不用关心有哪些位置显示总价，也不用关心哪些事件会影响总价，你只需要修改总价数据就可以了，所有显示总价的地方会自动更新。

Vue之中还有一个强大的功能就是watch，也就是监听数据变化。如果十个操作都会影响总价，而计算出总价之后又需要计算出折扣，如果用jq的话，你需要将十个事件的处理函数的末尾，都加上计算折扣的函数。如果用Vue，一个监听就可以搞定，只需要监听总价是否有变化，每次有变化就计算一次折扣，所以，每个用户事件中不再有任何关于折扣的代码，即使将来又多了十个用户事件，也没有区别。

七、jQ适合于交互简单的页面，Vue适合于交互复杂的页面

新闻网站的一个页面，复杂的JS不会多，因为用户主要是看字，点个赞。这时候jQ足够用。而APP性质的网站，或者SPA，也就是单页应用，这时候Vue的优势就凸显出来了，用jQ你很快就会绕进去，成为一团面条。

jQ擅长的方面是，行为和结果有一对一的关联，强调的是用户事件，比如用户点击赞，旁边的赞数就加1，除此之外没有别的。Vue擅长的是行为和结果多对多的关联，强调的是数据关联和响应，比如用户在外卖页面里点了一个菜，那么，购物车列表会计算一遍，总价会计算一遍，配送费会计算一遍，是否达到起送标准会计算一遍，是否达到某个代金券的适用范围会计算一遍，等等等等，当用户在外卖页面里把一个菜又追加了一份（点了一次加号），或者又减掉了一份（点了一次减号），又会引起一系列的计算，这时候如果用jQ，你需要为每一个计算都定义1个函数，最终定义N个函数，然后每1个函数可能都需要其他函数提供计算结果，而每个事件又可能调用多个函数，最终你会有一种要疯的感觉。

当然，如果APP性质的页面够简单、也不迭代，比如你写一个“贷款计算器”，计算过程是线性的，唯一的输入值拥有唯一的计算结果，这时候，可以考虑用jQ，因为用jQ写简单交互页面确实是快，几个事件绑定啪啪一写，就完事。但是，如果页面复杂，尤其是需要迭代，那么，花更多的时间、更大的精力来用Vue写，是值得的，如果用jQ，你会发现一点功能的修改就要牵扯百分之八十的jQ事件的代码，你要挨个改，会疯掉。