Vue为什么比JQuery更受开发者喜爱?

这次,面的是广州品高,面试官问我的一道题,为什么Vue会比Jquery更受开发者喜爱?煞笔如我,只回答了一些不痛不痒的答案。

先来看看我的答案:1.Vue支持数据绑定,而Jquery没有。2.Vue有中文文档,所以vue比较受中文开发者喜爱(回了这个答案估计就凉了)。3.Vue支持组件化,也就是模块化,每个组件都可以单独工作。

事后,当然是需要补救知识盲区啦。首先百度答案,基本所有的推荐文章都是互相抄袭,不够具体,还好还是有可取之处的。这些文章基本都说原因是

1.jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val();,它还是依赖DOM元素的值。

2.Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

我个人觉得这些答案都挺水的,所以我尝试去回答。

Vue其实优点挺多的,我这里就说我知道比较重要的几点。

1.Vue比JQuery减少了 DOM 操作

在这里我先提出一个问题,为什么要较少DOM操作????

回答:当DOM操作影响到布局的时候,浏览器的渲染引擎就要重新计算然后渲染,越多的DOM操作就会导致越多的计算,自然会影响页面性能,所以DOM操作减少是最好的

那Vue又是怎么样减少DOM操作的呢?

Vue通过虚拟DOM技术减少DOM操作。什么是虚拟DOM?使用js对象模拟DOM,在操作过程中不会直接操作DOM,等待虚拟DOM操作完成,仅仅比较开始和结束状态虚拟DOM有哪些变换,最终根据结束状态虚拟DOM去操作DOM。至于虚拟DOM怎么比较则是采用diff算法,具体算法我也不会。不过diff算法里有一个很好的措施来减少DOM操作。

下列是diff的处理措施:

(引用于:https://blog.csdn.net/m6i37jk/article/details/78140159)

(一)、优先处理特殊场景

(1)、头部的同类型节点、尾部的同类型节点

这类节点更新前后位置没有发生变化,所以不用移动它们对应的DOM

(2)、头尾/尾头的同类型节点

这类节点位置很明确,不需要再花心思查找,直接移动DOM就好

(二)、“原地复用”

“原地复用”是指Vue会尽可能复用DOM,尽可能不发生DOM的移动。Vue在判断更新前后指针是否指向同一个节点,其实不要求它们真实引用同一个DOM节点,实际上它仅判断指向的是否是同类节点,如果是同类节点,那么Vue会直接复用DOM,例如通过对换文本内容的方式,这样的好处是不需要移动DOM。

2.Vue支持双向数据绑定

数据绑定有单向数据绑定和双向数据绑定。

什么是单向数据绑定?

单向数据绑定即一方面只受另一方面影响,却无法影响另一方面。前端常说的单向数据绑定一般都指数据影响页面,而页面不影响数据。

什么是双向数据绑定?

双向的意思即两个方面相互影响,前端来说,即数据影响页面,页面同时影响数据。例如,在 MVVM 框架中,View(视图) 和 Model(数据) 是不可以直接通讯的,在它们之间存在着 ViewModel 这个中间介充当着观察者的角色。当用户操作 View(视图),ViewModel 感知到变化,然后通知 Model 发生相应改变;反之当 Model(数据) 发生改变,ViewModel 也能感知到变化,使 View 作出相应更新。

举个栗子


v-model双向绑定

以上代码将input的value和页面显示双向绑定在一起。其实v-model只是语法糖,双向绑定其实就等于单向绑定+UI时间监听,只不过Vue将过程采用黑箱封装起来了。

那双向绑定有什么好处?

好处就是方便,数据自动更新。而缺点就是无法得知是哪里更改了数据。

3.Vue支持组件化

组件化的概念

Web 中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用,页面就是有一个个类似这样的部分组成,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完善的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

组件化的特性

高内聚性,组建功能必须是完整的,如我要实现下拉菜单功能,那在下拉菜单这个组件中,就把下拉菜单所需要的所有功能全部实现。

低耦合度,通俗点说,代码独立不会和项目中的其他代码发生冲突。在实际工程中,我们经常会涉及到团队协作,传统按照业务线去编写代码的方式,就很容易相互冲突,所以运用组件化方式就可大大避免这种冲突的存在、

每一个组件都有子集清晰的职责,完整的功能,较低的耦合便于单元测试和重复利用。

组件化的优点

1.提高开发效率 2.方便重复使用 3.简化调试步骤 4.提升整个项目的可维护性 5.便于协同开发


结语

由于缺乏经验,还是吃了不少亏,希望有大神愿意指点一下。

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

推荐阅读更多精彩内容