前端框架系列之（mvvm）

简介

前面我们介绍过了mvc 前端框架系列之（mvc），mvp 前端框架系列之（mvp）,MVP中我们说过随着业务逻辑的增加，UI的改变多的情况下，会有非常多的跟UI相关的case，这样就会造成View的接口会很庞大。而MVVM就解决了这个问题，通过双向绑定的机制，实现数据和UI内容，只要想改其中一方，另一方都能够及时更新的一种设计理念，这样就省去了很多在View层中写很多case的情况，只需要改变数据就行。

• Model（模型）表示应用程序核心（比如数据库记录列表）。
• View（视图）显示数据（数据库记录）。
• ViewModel (视图模型) 暴露公共属性和命令的视图的抽象。

我们再看一下mvc的设计图：

再看一下mvp的设计图：

最后看一下mvvm的设计图：

有没有发现，不管是mvc、mvp、mvvm其实都差不多呢？其实区别还是挺大的，在MVP中View和presenter要相互持有，方便调用对方，而在MVP中 View和ViewModel通过Binding进行关联，他们之前的关联处理通过绑定器（DataBinding）完成。

其实vue本身就是一个mvvm架构，通过es5的Object.defineProperty监听数据的变化，然后通过观察者模式通知各个vue实例，最后触发dom的更新，实现了数据驱动视图。感兴趣的可以去看一下我之前写的两篇关于vue的文章：

• Vue源码解析之（computed&watch&观察者模式）
• Vue源码解析(一)
• Vue源码解析二(render&mount)

业务需求

1. 接收用户输入的“用户名”和“密