目录
1. MVVM
2. Vue2 双向绑定原理(数据响应式)
(一)MVVM
1. 定义:
MVVM 是 Model-View-ViewModel(模型-视图-视图模型)的缩写;是一种软件架构设计模式。
其中:
- Model:是数据模型,既后端传过来的数据;
- View:是视图层,既我们看到的页面;
- ViewModel:是连接Model和View的中间桥梁
在MVVM的框架下,View和Model是不能直接通信的,Model与View之间通过ViewMode关联。ViewModel负责将Model数据的变化显示到View上,将View的改变反馈到Model上。这就是我们常说的双向绑定数据机制。
2. 优点:
- 降低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
- 可重用性:可以把一些视图逻辑放在ViewModel层中,让很多View重用这些视图逻辑。
- 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
- 可测试:界面素来是比较难于测试的,测试可以针对ViewModel来写。
3. 缺点:
- 数据绑定使得 Bug 很难被调试。你看到界面异常了,有可能是你 View 的代码有 Bug,也可能是 Model 的代码有问题。
- 因为使用了dataBinding,增加了大量的内存开销,增加了程序的编译时间,项目越大内存开销越大。
那如何设计MVVM模型模型呢。需要解决两个关键问题:
- 如何知道数据更新。
- 数据更新后,如何通知变化。
下面就分别介绍vue是如何实现的以上两点,理解了这两点,基本上也就明白了双向绑定的机制。
(二)Vue2 双向绑定原理(数据响应式)
1. 原理概述
Vue2 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty
来劫持数据的setter
,getter
,在数据变动时发布消息给订阅者,订阅者收到消息后进行相应的处理。
要实现MVVM的双向绑定,就必须要实现以下几点:
- Compile—指令解析系统,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
- Observer—数据的观察者,让数据对象的读写操作都处于自己的监管之下。当初始化实例的时候,会递归遍历data,用Object.defineProperty来拦截数据(包含数组里的每个数据)。
- Dep+Watcher—发布订阅模型,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,