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是指定，简单地说是自定义的执行函数。 有如下代码：
代码语言：javascript复制<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()方法。
