前端Vue.js框架是什么?

JavaScript06

前端Vue.js框架是什么?,第1张

前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻辑,Vue框架能够提高开发的效率。

科普时刻

黑马程序员vue前端基础教程-4个小时带你快速入门vue

前端开发利器vue,微信小程序快速开发实战

web前端基础必备教程-2小时玩转Vue单元测试

黑马程序员Vue2.0+Vue3.0入门到精通,大厂前端岗位必备技能

1、Vue.js是什么?

Vue是一个js库,且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层,非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。

Vue.是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

2、Vue的MVVM设计模式是什么?

如果了解前端一定知道MVVM和MVC这两种设计模式,且很有可能对mvp也有一些了解。MVC即model,view,control,jQuery就是采用的这种设计模式。MVVM即model,view,viewmodel,是数据驱动模式,即所有的一切通过操作数据来进行而尽量避免操作DOM树。

不关注DOM结构,考虑数据该如何储存,用户的操作在view通过viewmodel进行数据处理,分情况是否通过ajax与model层进行交互,再返回到view层,在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐操作,而是专心于对用户的操作进行处理,避免MVC中control层过厚的问题。

在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目,在console控制台选择vue面板。在Devtools对象中,可以选择组件,查看对应组件内的数据信息。也可以选择Vuex选项,查看该项目内Vuex的状况变量信息。

3、Vue.js有哪些优点?

声明式,响应式的数据绑定;组件化的开发;Virtual DOM;响应式的数据绑定

(1)jQuery首先获取到DOM对象,然后对DOM对象进行进行值的修改等操作;

(2)Vue首先把值和js对象进行绑定,然后修改js对象值,Vue框架会自动把DOM的值就行更新;

(3)简单理解为Vue帮我们做了DOM操作,以后用Vue就需要修改对象的值和做好元素和对象的绑定,Vue框架会自动做好DOM相关操作;

(4)DOM元素跟随JS对象值的变化而变化叫做单向数据绑定,若JS对象的值也跟随着DOM元素。

4、需要学习哪些Vue.js框架相关知识点?

Vue.js 安装、Vue.js 目录结构、Vue.js 起步、Vue.js 模板语法、Vue.js 条件语句、Vue.js 循环语句、Vue.js 计算属性、Vue.js 监听属性、Vue.js 样式绑定、Vue.js 事件处理器、Vue.js 表单、Vue.js 组件、Vue.js 组件自定义事件、Vue.js 自定义指令、Vue.js 路由、Vue.js 过渡&动画、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 响应接口、Vue.js 实例等。

Vue.js 是一个JavaScriptMVVM库,一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的,采取自底向上增量开辟的设计。比拟于Angular.js,Vue.js供给了加倍简洁、更易于懂得的API,使得我们快速地上手并应用Vue.js。

想必教程大家已经看过,也动手做过一些Demo。倘若让大家用一句话概括’“vue是什么”,你的答案会是什么?。这里Vue官方教程也给出了自己的一句话解释。就是教程开头的第一句话

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。

这句话你可能并不陌生,但你未必真正读懂了它。 我们注意到这句话中有一个被作者高亮的词语—渐进式框架,其实明白了这个词语的意思,也便读懂了这句话,从而也就理解了Vue的核心理念。

那么渐进式框架究竟是什么意思,在解释这个词语之前,我们有必要先搞明白一个问题 “什么是框架?”[1]

在最初前端开发中,为了完成某个任务,我们首先利用JS从HTML文件中获取DOM元素,随后添加事件,最后进行一系列的JS编程操作。我们姑且把这种开发方式称为“DOM流”吧,“DOM流”的开发方式看起来似乎很简单实用,但是随着业务需求不断变动,你的麻烦就来了,整个代码会变得越来越混乱,无法维护。举个例子,假设现在有一个这样的需求,有一张图片,在被点击时,可以记录下被点击的次数。 这看起来很简单吧, 按照上面提到到开发方式,应该很快就可以搞定。 那么接下来,需求稍微发生了点变动, 要求有两张图片,分别被点击时,可以记录下各自的点击次数。这次似乎也很简单,只需把原先的代码复制粘贴一份就可以了。 那么当这个需求变成五张图片时,你会怎么做? 还是简单复制粘贴吧,这样完全可以完成这个需求,但是你会觉得很别扭,因为你的代码此时变得很臃肿,存在很多重复的过程,但是似乎还在你的忍受范围内。这时候需求又发生了微小的变动,还是五张照片分别记录被点击次数,不过这样单独罗列五张图片似乎太占空间,现在只需要存在一个图片的位置,通过选择按钮来切换被点击的图片。 这时候你可能会奔溃掉,因为要完成这个看似微小的改动,你原先写的大部分代码可能都需要被删掉,甚至是完全清空掉,从零开始写起,更让人郁闷的是,即使耐着性子重新写好了这个需求,一旦又来了新的需求,可能又要重新开始了。这还仅仅是一个单纯的记录点击次数的任务,“DOM流”的开发方式似乎已经出现很大的问题,而在现实的开发中,复杂的业务逻辑和巨大的代码量,更是“DOM流”根本无法承受的。

为了应对以上问题,开发人员重新梳理了代码的组织结构,把JS代码划分为三个板块,数据(M)、视图(V)、 逻辑控制(*)。 数据板块只含有数据内容,视图板块只负责更改样式,逻辑控制负责联系视图板块和数据板块和相应的逻辑,如下图所示。 这样代码结构组织的好处是显而易见的,当需求发生变动时,只需要改动相应的板块即可。还是拿上文中提到的记录图片点击次数的需求为例,这是重新组织后的代码 demo,可以看到这次代码变得清晰易懂,而且你自己也可以去设想再增加某些需求,来看看需要改动代码的程度。

其实这种开发方式,就是我们常说的MV*模式,而MVC、MVVM、 MVP[2]等都是MV*的衍生物, 其实叫什么模式名称并不重要,当你现在搞清楚了这种代码组织结构的目的,就会明白这些模式本质上都是一回事,让数据与视图间不会发生直接联系。 其实说到这里,你应该知道“DOM流存在缺陷的原因,在“DOM流”中其实是把dom当做Model,我们直接从dom中获取数据,随后又改变dom来更新视图,视图和模型其实是混在一起了,代码组织自然很混乱,不易维护。

而这种MV*的代码组织方式,渐渐的就演变成了所谓的框架。 团队开发中会选择使用框架的一个重要的原因,因为框架提前设定好的代码的组织结构让实际开发项目的代码有一个相对明确地方,这样不用担心因为团队中某个人疏忽或特有编码习惯, 造成代码整体的混乱。这里说句题外话,依照现在对框架的认识,严格来说Bootstrap并不是一个框架,其实只是一个CSS工具集,主要用来做界面美化。而Jquery也并不涉及代码的结构组织,只是把一些重复的操作进行简化 (如 DOM操作 Ajax操作等),再加上对于兼容性的解决,所以只是用来方便操作的JS库。

现在利用MV*的代码组织方式,我们拥有了可以应对需求变化的健壮代码。在使用过程中,开发人员逐渐发现在应对有频繁数据更新的需求时,我们总在做着同样的工作—获取DOM,依照新的数据来更新视图。这些工作繁琐且重复,实质上耗费了开发人员的精力。 为了解决这个问题,基于MV*的模式的MVVM框架诞生—Knockout。它利用实例的形式,把model层内容传入到实例所谓的view model中,利用binding方法完成view model与view之间的双向绑定,view mode中数据变化时,view发生变化,反之亦然。这段对于Knockout描述可能有点抽象, 毕竟上没有上代码,但你至少知道Knockout框架能替我们完成了从数据更新后视图相应的更新就行了,如下图所示。

你可能会感叹,具有这么先进理念和功能的框架,自己怎么没用过,甚至之前没有听说过。这是因为Knockout诞生的时候超越了它的时代,还记得这段开头提到MVVM框架产生的原因吗—应对有频繁数据更新的需求,而在当时前端页面的大部分就只涉及静态展示和简单交互,不存在频繁的数据变更,使用Jquery 足矣。就这样,Knockout在当时并没有流行起来,不过这个框架现在依然存在,感兴趣的可以去看看,上手也很简单 。 直到最近几年,随着随着关于数据频繁变动的需求越来越多,人们又开始重视这种自动跟新视图的理念了。 Vue就是继承这种理念的众多框架之一。如下图所示,在具有响应式系统的Vue实例中,DOM状态只是数据状态的一个映射 即 UI=VM(State) ,当等式右边State改变了,页面展示部分UI就会发生相应改变。很多人初次上手Vue时,觉得很好用,原因就是这个。不过需要注意的是,Vue的核心定位并不是一个框架[3],设计上也没有完全遵循MVVM模式,可以看到在图中只有State和View两部分, Vue的核心功能强调的是状态到界面的映射,对于代码的结构组织并不重视, 所以单纯只使用其核心功能时,它并不是一个框架,而更像一个视图模板引擎,这也是为什么Vue开发者把其命名成读音类似于view的原因。

现在我们来看看“渐进式”的意思。上文提到,Vue的核心的功能,是一个视图模板引擎,但这不是说Vue就不能成为一个框架。如下图所示,这里包含了Vue的所有部件,在声明式渲染(视图模板引擎)的基础上,我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是,这些功能相互独立,你可以在核心功能的基础上任意选用其他的部件,不一定要全部整合在一起。可以看到,所说的“渐进式”,其实就是Vue的使用方式,同时也体现了Vue的设计的理念

而对于“渐进式”的解释,我在知乎上看到了一个不错的回答,这个答案也被Vue的设计者点了赞。这个回答的角度很好,主要从与React、Angular的比较来阐述的,由于本人没怎么用过另外这两个框架,也就不妄加评述,所以仅把回答进行摘录,以供参考[4]。

在我看来,渐进式代表的含义是:主张最少。

每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:

- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)

所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。

比如React,它也有一定程度的主张,它的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为它是软性侵入。

Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。

渐进式的含义,我的理解是:没有多做职责之外的事。

好了,到这里已经解释完了“渐进式框架”的意思,现在让我们再回过头来看看开头那句话。

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。

是不是对Vue有了不一样的感觉,现在也应该知道如何去学习和使用Vue了吧。在学习中,我们没必要一上来就搞懂Vue的每一个部件和功能,先从核心功能开始学习,逐渐扩展。 同时,在使用中,我们也没有必要把全部件能都拿出来,需要什么用什么就是了,而且也可以把Vue很方便的与其它已有项目或框架相结合。