vue的mvvm模式

                                              Vue的mvvm模式

一、传统前端开发使用的MVP模式

        MVP模式即model(数据层)         Presenter(控制层)        View(视图层)

       首先看个例子，我们用jquery写一个MVP模式

       

<div>
    <input type="text" id="input"/>
    <button id = "btn">提交</button>
    <ul id = "ulList"></ul>
</div>

function Page(){
    
}
$.extend(Page.prototype,{
    init:function(){
        this.bindEvents()
    },
    bindEvents:function(){
        var btn = $('#btn');
        btn.on('click,$.proxy(this.handleBtnClick,this))
    },
    handleBtnClick:function(){
        var inputEle = $('#input);
        var btnVal = inputEle.val();
        var ulEle = $('#ulList');
        ulEle.append('<li> ' + btnVal + ' </li>')
    }
})

var page = new Page();
page.init();

那么我们来分析下，上面这段代码就是MVP模式，但是我们发现M层一开始非常弱，上面的dom就是V层，P层是控制层，我们来看试图层和控制器如何通信的，当视图发出i一个事件，交给控制器会去执行，比如去调用ajax去获取数据，要么直接操作dom，决定给dom如何修改，那么我们发现P层是MVP模式中核心的一层，它里面的逻辑是M层和V层的中转站，里面大量的代码都写在P层。

那P层里面很多代码都在干嘛呢，我们发现都实际上在操纵dom。

         接下来看MVVM模式

 MVVM模式也有M层-数据层，V层-视图层，没有P层，取而代之的是VM层，我们发现VM层并不需要我们自己写，我们不需要关注VM层是如何实现的，只需要关注M层和V层，我们写vue代码的时候，我们并没有操作dom，我们的代码基本上都是在操作数据，然后渲染视图，这样的一个实现是VM层做的，vue会监听到数据有了变化，VM层是vue底层实现的。vue也会监听到试图层的事件触发，通过vm层调用逻辑代码，改变了M层的数据，数据变化，数据变化VM层又会把数据映射到V层，所以数据改变，页面也会相应改变，所以MVVM层核心的是M层。

总结：MVP模式是面向dom开发，MVVM模式是面向数据编程。使用MVP模式开发，会有大量dom的操作代码，MVVM模式利用虚拟dom，节约了约70%的操作dom代码量，大大提高了性能。