Vue
Vue (读音
/vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。工具链是指在前端开发过程中用到的一系列工具,例如,使用脚手架工具创建应用,使用依赖管理工具安装依赖包,以及使用构建工具进行代码编译等。
在此我们需要了解 Vue的作者以及几个比较重要的概念:
尤雨溪
Vue 是由国人(尤雨溪)开发,在前端届十分流行的一句话:尤雨溪懂个锤子的 Vue,他只不过是一个写 Vue 的人罢了。
渐进式
渐进式就是按需逐渐集成功能使用。
库与框架
库:库就是代码的集合,供程序员调用,通俗来讲,库为我们提供了很多封装好的函数,例如 jQuery。
框架:框架是为了解决一个或者一类问题而设计的,例如 Vue、React、Angular。框架为我们提供了一整套的服务,经常会制定很多规则或者约束,使用者必须严格遵守其语法规则,否则就会出现一堆的warning和error。总的来说库更加灵活,而框架使用起来更加方便。
MVVM
Vue 在设计上使用了 **MVVM **(Model-View-ViewModel)模式。MVVM是由经典的软件架构 MVC (Model-View-Controller)衍生而来的。MVVM主要包含3个部分,分别是 Model、View、和 ViewModel。Model 指的是数据部分,主要负责业务数据;View 指的是视图部分,即 DOM 元素,负责视图的修改。ViewModel 是连接视图与数据的数据模型,负责监听 Model 或者 View 的修改。
在 MVVM中,数据(Model)和视图(View)是不能直接通信的,视图模型(ViewModel)就相当于一个观察者,监听着双方的动作,并及时通知进行相应的操作。当 Model 发生变化时,ViewModel 能够监听到这种变化,并及时通知 View 做出相应的修改;反之,当 View 发生变化时,ViewModel 监听到变化后,会通知 Model 进行修改,实现视图与模型的互相解耦。
Vue 的优势
- 轻量级框架:
vue作为一款轻量级框架,门槛低,上手快, 简单易学。 - 组件化开发:实现数据与结构相分离,使代码量减少,从而提高开发效率。
- 虚拟DOM(
Virtual DOM):在传统开发中,用jQuery或者原生的JavaScript DOM函数对DOM进行频繁操作时,会触发页面多次的重绘或回流,导致浏览器要不停的渲染新的DOM树,使页面看起来非常卡顿。而使用Vue可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化。由于这个DOM操作属于预处理操作,并没有真实的去操作DOM,所以叫做虚拟DOM。只有最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。 - 双向数据绑定:使用
MVVM思想实现数据的双向绑定,让开发者不用再操作DOM对象,有更多的时间去思考业务逻辑。 Vue是单页面应用,页面局部刷新,不用每次跳转都请求数据,加快了访问速度,提高了用户体验。