先说明一下什么是标准的mvvm模型：

• M: Model；既是数据，主要负责业务数据相关；
• V: View；即是视图，展示给用户看的页面，细分下来就是html+css层；
• VM: ViewModel；是连接界面View和数据Model桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的核心；

图解见下图：

我们再看一下使用vue的一个简单示例：

由上图可知：MVVMM设计模型和Vue的设计会有以下对应关系：

Vue中的data =====  MVVM模型中Model

Vue中的template ======  MVVM模型中View

Vue中的new Vue实例 ======  MVVM模型中ViewModel

实现mvvm主要包含两个方面：数据变化更新视图，视图变化更新数据

视图变化更新数据：----- 可以利用v-model指令，也可以用户手动输入监听@input事件来实现，更改数据;

数据变化更新视图：----- Model变更触发View更新必须通过VewModel (Vue实例),当Object.defineProperty()数据劫持中的set方法触发时会通知render函数进行异步更新视图；

以上是MVVM的思想。

当然，Vue也是按照这样的设计的，但是vue中添加了一个属性ref，通过this.$ref可以直接获取dom节点对象，通过ref直接去操作视图。这一点上，违背了MVVM模型，所以说vue并没有完全遵循MVVM模型。放一张官网的说明图：

总结：vue并虽然没有完全遵循MVVM模型，但也是属于MVVM模型的

---

下面将介绍一下 MMVM 和 MVC 模型的区别：

什么是MVC:

• M：model ；模型 数据来源；
• V：view； 视图 主要用来展示前台页面及数据给用户；
• C：controller；控制器 主要用户流程控制 作为中间枢纽 连接V和M 主要做一些流程判断等；

区别：

• mvvm通过数据驱动视图层的显示而不是节点操作；
• mvc中的view和model是可以直接访问的,造成耦合度较高；
• mvvm真正将页面和数据逻辑分离,将数据绑定放到js实现,解决了mvc中大量的dom操作使得页面渲染速度将降低,加载速度快；

mvc(Model-View-Controller)是单通信的,必须通过Controller承上启下,mvc和mvvm的区别并不是vm完全取代了c,只是在mvc的基础上增加了vm层,弱化了c的地位,vm主要是抽离c中的业务逻辑,实现逻辑组件的重用是开发效率更高；