MVVM

Mvvm是什么？

1. MVVM是Model-View-ViewModel的简写
2. 它本质上是MVC 的改进版
3. MVVM（Model-View-ViewModel）框架的由来是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架

MVVM的优点

• 耦合性: 视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
• 可重用性 ：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
• 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码
• 可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

MVVM的缺点

1. 数据绑定使得 Bug 不易调试，也会使得一个位置的 Bug 被快速传递到别的位置
2. 虽然使用Model方便了保证数据一致性，但是大的模块中长期不释放内存就会造成花费更多的内存
3. 数据双向绑定不利于View部分的代码复用

简单看懂MVVM

MVVM 的理解

下面来看下这张图

MVVM的双向绑定原理

MVVM 的核心是数据劫持、数据代理、数据编译和"发布订阅模式"

说的MVVM数据劫持也少不了

• 1、观察对象，给对象增加 Object.defineProperty 

• 2、vue的特点就是新增不存在的属性不会给该属性添加 get 、 set 钩子函数。

• 3、深度响应。循环递归遍历 data 的属性，给属性添加 get ， set 钩子函数。

• 4、每次赋予一个新对象时（即调用 set 钩子函数时），会给这个新对象进行数据劫持( defineProperty )。

  简单来说就是利用 Object.defineProperty()，并且把内部解耦为 Observer, Dep, 并使用 Watcher 相连。

Object.defineProperty

在vue2.x版本中，数据劫持是用过Object.defineProperty这个API来实现

var message = 'hello world';
const data = {};
Object.defineProperty(data, 'message', {
    get() {
        return message;
    },
    set(newVal) {
        message = newVal;
    }
});
data.message // 'hello world'
data.message = 'test' // 'test'