为什么会出现 MVVM
对于MVVM的理解为什么会出现 MVVM 呢?MVVM框架Vue-MVVM 架构的最佳实践MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewMod
为什么会出现 MVVM
MVVM
是Model-View-ViewModel
缩写,也就是把MVC
中的Controller
演变成ViewModel
。Model层
代表数据模型
,View
代表UI组件
,ViewModel
是View和Model层的桥梁
,数据会绑定到viewModel
层并自动将数据渲染到页面中,视图变化的时候会通知viewModel
层更新数据。
为什么会出现 MVVM 呢?
MVC
即 Model-View-Controller
的缩写,就是 模型—视图—控制器
,也就是说一个标准的Web 应用程式是由这三部分组成的:
将整个前端页面分成View,Controller,Modal
,视图上发生变化,通过Controller
(控件)将响应传入到Model
(数据源),由数据源改变View上面的数据。
业务逻辑放在Model当中,页面渲染逻辑放在View当中,但在实际运用上却存在一个问题:那就是MVC框架允许View和Model直接进行通信
View和Model之间随着业务量的不断庞大,会出现蜘蛛网一样难以处理的依赖关系,随着前端应用的复杂程度越来越复杂。前端开发MVC就暴露出了三个痛点问题:
- 1、 开发者在代码中大量调用相同的
DOM API
,处理繁琐 ,操作冗余,使得代码难以维护。 - 2、大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
- 3、 当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致 Model 发生变化,开发者同样需要将变化的数据同步到Model 中,这样的工作不仅繁琐,而且很难维护复杂多变的数据状态。
MVVM 的出现,完美解决了以上三个问题。
MVVM框架
可以看到MVVM
分别指View,Model,View-Model
,View
通过View-Model
的DOM Listeners
将事件绑定到Model上,而Model
则通过Data Bindings
来管理View中的数据,View-Model
从中起到一个连接桥的作用。
MVVM
是Model-View-ViewModel
的缩写Model:
代表数据模型
,也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model
称为数据层
,因为它仅仅关注数据本身
,不关心任何行为- View: 用户操作界面。当ViewModel对Model进行更新的时候,会通过数据绑定更新到View
- ViewModel: 业务逻辑层,View需要什么数据,ViewModel要提供这个数据;View有某些操作,ViewModel就要响应这些操作,所以可以说它是Model for View.
总结: MVVM模式简化了界面与业务的依赖,解决了数据频繁更新。MVVM 在使用当中,利用双向绑定技术,使得 Model 变化时,ViewModel 会自动更新,而 ViewModel 变化时,View 也会自动变化。
MVVM框架
与MVC框架
的主要区别有两点:
1、实现数据与视图的分离
2、通过数据来驱动视图,开发者只需要关心数据变化,DOM操作被封装了。
Vue-MVVM 架构的最佳实践
Vue.js
可以说是MVVM 架构
的最佳实践,专注于 MVVM
中的 ViewModel
,ViewModel
负责连接 View
和 Model
,保证视图和数据的一致性,不仅做到了数据双向绑定,而且也是一款相对来比较轻量级的JS 库,下面简单了解一下 Vue.js 关于双向绑定
的一些实现细节
Vue.js
是采用 Object.defineProperty
的 getter
和 setter
,并结合观察者模式
来实现数据绑定的。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
Observer
:数据监听器
,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
,内部采用Object.defineProperty
的getter和setter来实现Compile
:指令解析器
,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数Watcher
:订阅者
,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数Dep
:消息订阅器
,内部维护了一个数组
,用来收集订阅者(Watcher)
,数据变动触发notify
函数,再调用订阅者的 update
方法
从图中可以看出,当执行 new Vue()
时,Vue 就进入了初始化阶段,
一方面Vue 会遍历 data 选项中的属性,并用 Object.defineProperty
将它们转为 getter/setter,实现数据变化监听功能;
另一方面,Vue
的指令编译器Compile
对元素节点的指令进行扫描和解析,初始化视图,并订阅 Watcher
来更新视图, 此时Wather
会将自己添加到消息订阅器中(Dep)
,初始化完毕。
当数据发生变化时,Observer
中的 setter 方法被触发,setter 会立即调用Dep.notify()
,Dep 开始遍历所有的订阅者watcher
,并调用订阅者的 update
方法,订阅者收到通知后对视图进行相应的更新。
谢谢你阅读到了最后
期待你关注、收藏、评论、点赞
MVC、MVP、MVVM 设计模式
MVVM框架理解及其原理实现
MVVM模式理解
vue的双向绑定原理及实现
vue的双向绑定原理及一步一步实现MVVM
剖析Vue原理&实现双向绑定MVVM
更多推荐
所有评论(0)