MVVM与MVC

Vue中的MVVM模式

 

MVC框架

M：model 数据层 处理数据的逻辑，负责在数据库中存数据

V：view 视图层 处理数据的显示 渲染

C：controller 控制器 应用程序的交互部分，在视图层去读数据，向数据层发送数据

 

MVC通信流程：

1、视图层接收到用户传入的数据，传送指令给控制器

2、控制器完成一些业务逻辑，要求数据层去改变数据状态

3、数据层将新的数据发送给视图层，用户得到最终反馈

所有的通信都是单向的

MVC局限性：

1、view层包含一些业务逻辑

2、view层中的业务逻辑。无法复用

3、数据层的代码越来越少。控制器的代码越来越多

 

MVVM是最早是有由微软提出的，视图层和数据完全分离

M：model 数据层

V：view 视图层

高效vw：viewModel 视图模型号 V和M之间的一个通信桥梁

1、通过数据绑定将数据层到的内容渲染到视图层

2、再通过DOM监听，监听视图层的改变，一旦视图层改变

3、将视图层内容发送给数据层

 

采用的双向数据流

 

MVVM框架：angular Vue

MVC框架：react

 

Vue的优点：易用、灵活、高效

 

插值表达式 {{...}}

Mustache语法 也叫做胡须语法（小胡子语法）

字符串、数字、表达式、JSON数据、方法

插值表达式只能作为标签的内容书写，不能作为属性书写

只能写在标签的内部