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

谁践踏了优雅 2021-06-26 16:06 498阅读 0赞

## 一、`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`事件的代码，你要挨个改，会疯掉。