MVP模式

P代表Presenter,与Controller有些类似，但是不同的是，在用户进行DOM修改操作时将通过View上的行为进行触发，然后将修改的通知告诉给Presenter来完成对Model与其他View的更新；而MVC模式下，用户的操作是直接通过Controller进行。

通常，Presenter与View的操作是双向绑定的，即View的操作会触发Presenter，Presenter的操作会触发View。

MVVM模式

MVVM是一种自动化的MVP框架，使用ViewModel代替Presenter，并使用ViewModel自动完成对数据Model的调用和模板内容的渲染。

当用户进行操作时，ViewModel会捕获数据变化，直接将变化反映到View层。在MVVM模式下，通过使用Directive来管理ViewModel的数据操作。

什么是Directive呢？例如模板数据的渲染和数据绑定可以通过q-html或q-click（不同框架前缀不同）等特殊的属性来控制完成，这些特殊的元素标签属性就是我们所说的Directive。

具体说来，Directive是指定，简单地说是自定义的执行函数。

有如下代码：

<form action="#" id="form">
  <label for="text" q-html="label"></label>
  <input type="text" q-value="value" q-model="value" q-mydo="number | getValue">
  <button q-on="click: submit"></button>
</form>
let viewModel = new VM({
  $el: document.getElementById('form'),
  data:{
    label:'用户名',
    value:'输入初始值',
    number:0
  },
  method:{
    submit(){
     //todo
    }
  },
  directive:{
    mydo(value){
     console.log(value);
    }
  },
  filter:{
    getValue(){
      return ++ value;
    }
  }
});

代码解释：首先js会找到document.getElementById(‘form’)这个元素并开始扫描元素节点，对这个元素的属性节点attribute和所有子节点中的attribute进行遍历，一旦遍历到民名称中含有q-开头的属性，就认为是MVVM框架自定义的Directive，此时会执行相对应的操作。例如遍历到q-html="label"时，就将ViewModel初始化时默认的数据对象data中的label值赋予这个元素的innerHtml，遍历到q-on="click: submit"时，就在这个元素上绑定click事件，事件触发的函数为submit；而自定义的q-mydo指令，当遍历到该节点的q-mydo属性时，调用Directive中的mydo方法，输入参数为data中getValue方法的返回值。用户在View层操作时会自定改变ViewModel的数据，然后ViewModel会检测数据的变化，重新遍历扫描节点属性，执行对应的Directive。

数据变更检测方法

• 手动触发绑定

通过在数据对象上定义get()方法和set()方法，调用时手动触发get()或set()函数来获取、修改数据，改变数据后会主动触发get()和set()函数中View层的重新渲染功能。

• 脏检测

在ViewModel对象的某个属性值发生变化时找到与这个属性值相关的所有元素，然后再比较数据变化，如果变化则进行Directive指令调用，对这个元素进行重新扫描渲染。与手动绑定不同的是，脏检测只针对可能修改的元素进行扫描，从而提高ViewModel内容变化后扫描视图并渲染的效率。

• 数据劫持

使用Object.defineProperty和 Object.defineProperies对ViewModel数据对象进行属性get()和Set()的监听，当有数据读取和赋值操作时，则扫描节点，运行指定对应节点的Directive指令。

• ES6 Proxy

用于在已有的对象基础上重新定义一个对象，并重新定义对象原型上的方法，包括get()和set()方法。