从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事件的代码,你要挨个改,会疯掉。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容

  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    忘川慕白阅读 5,933评论 7 113
  • https://zhuanlan.zhihu.com/p/25287755 pyspider例子可以看一下 htt...
    clshinem阅读 142评论 0 1
  • 1.第一性原理通常是跟计算联系在一起的,是指在进行计算的时候除了告诉程序你所使用的原子和他们的位置外,没有其他的实...
    gqyjlu阅读 186评论 0 1
  • 看一下理性的书籍
    小紫蓝呢阅读 200评论 0 0
  • 很多人或许都有过类似的经历,忽然处在某个阶段的自己找不到方向了。倦了、累了、乏了、腻了,身边的一切都觉得...
    胡小涂ds阅读 279评论 0 2