MVVM初接触

253 阅读3分钟

最近项目需求接触VUE框架,不用操作DOM的的感觉实在酸爽。

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

谈到VUE自然离不开MVVM框架,MVVM是MVC的一个变种模式,所以提到MVVM框架就绕不开MVC,上图

  • 视图:管理作为位图展示到屏幕上的图形和文字输出;
  • 控制器:翻译用户的输入并依照用户的输入操作模型和视图;
  • 模型:管理应用的行为和数据,响应数据请求(经常来自视图)和更新状态的指令(经常来自控制器);

MVC框架将前端页面分为View(页面渲染),Controller(控件)和Model(业务逻辑),视图层的变化传入控件,通过控件改变视图的数据变化。整个过程是单向的,仅能实现模型数据变化触发视图更新,并且视图和业务逻辑之间耦合过于紧密。

MVVC框架可以做到数据和视图的分离,通过ViewModel驱动View和反向驱动Model,实现双向绑定,模型数据变化触发视图更新,并且可以实现视图操作触发模型数据更新。原理是通过DOM Listener和Data Bindings两个对象实现的。

用户只需要完成视图模板,完成数据绑定和事件绑定后,在ViewModel进行数据处理,事件触发会影响View中的数据更新,所以操作数据就完成了对视图的操作。

使用VUE的用户需求整个处理流程概要如下:

  • 当用户操作了界面,需要进行业务处理都会通过网络请求请求后端的服务器,此时请求会被后端的App.js监听到;
  • App.js是整个项目的入口模块,一切的请求先要进入此处处理,由于app。js没有路由的分发处理功能,需要调用路由分发模块进行路由的分发处理;
  • 路由分发模块只负责路由分发处理,不负责具体业务的逻辑处理,涉及到逻辑处理的交由Controller模块进行处理;
  • Controller只进行业务处理,不负责数据的CRUD操作,关于数据的操作调用Model层;
  • 请求到达model层,只负责数据的增删改查操作;

上图来自网络

MVVM的核心如下:

  • 组件机制:供组件的定义、继承、生命周期、组件间通信机制;
  • 数据存取器: 通过Object.defineProperty()定义,完成对数据的监听;
  • 视图引擎:帮助开发者完成DOM操作