浅谈Vue

251 阅读3分钟

Vue

Vue (读音/vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。工具链是指在前端开发过程中用到的一系列工具,例如,使用脚手架工具创建应用,使用依赖管理工具安装依赖包,以及使用构建工具进行代码编译等。

在此我们需要了解 Vue的作者以及几个比较重要的概念:

尤雨溪

Vue 是由国人(尤雨溪)开发,在前端届十分流行的一句话:尤雨溪懂个锤子的 Vue,他只不过是一个写 Vue 的人罢了。

渐进式

渐进式就是按需逐渐集成功能使用。

库与框架

库:库就是代码的集合,供程序员调用,通俗来讲,库为我们提供了很多封装好的函数,例如 jQuery

框架:框架是为了解决一个或者一类问题而设计的,例如 VueReactAngular。框架为我们提供了一整套的服务,经常会制定很多规则或者约束,使用者必须严格遵守其语法规则,否则就会出现一堆的warning和error。总的来说库更加灵活,而框架使用起来更加方便。

MVVM

Vue 在设计上使用了 **MVVM **(Model-View-ViewModel)模式。MVVM是由经典的软件架构 MVC (Model-View-Controller)衍生而来的。MVVM主要包含3个部分,分别是 ModelView、和 ViewModelModel 指的是数据部分,主要负责业务数据;View 指的是视图部分,即 DOM 元素,负责视图的修改。ViewModel 是连接视图与数据的数据模型,负责监听 Model 或者 View 的修改。

MVVM.png

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 是单页面应用,页面局部刷新,不用每次跳转都请求数据,加快了访问速度,提高了用户体验。