M: Model 数据模型

  1.      - 操作数据库（对数据进行增删改查的操作）

V：View 视图层

  1.      - 显示视图或视图模板

C：Controller 控制器层

  1.      - 服务端渲染
  2.            - 逻辑层    把数据和视图关联挂载和基本的逻辑操作

View 需要数据 -> Controller 对应的方法 -> 调用 Model 的方法 -> 获取数据 -> 返回给 Controller 对应的方法 -> render 到 View 中

  1.      - 前端渲染
  2.            - API 层    前端请求的 API 对应的是控制器中的方法

前端 -> 异步请求 URL -> 控制器中的一个方法 -> Model 层的方法 -> 操作数据库 -> 获取数据 -> 返回给控制器方法 -> 响应回前端

前端 MVC

Model 管理视图所需要的数据 -> 数据与视图的关联
View HTML 模板 + 视图渲染
Controller 管理事件逻辑

加减乘除计算器

Model data -> 数字a、数字b、运算符号s、结果r
watch -> data change -> update view
View template -> render
Controller event trigger -> model 的 data

controller -> model -> view
view -> controller -> model

其实这就是 MVVM 的雏形

点击查看【codepen】
MVC 会有很多的缺陷，横向切割得好，但纵向切割就不行。
如 View 层管理模板，但逻辑也在里面。MVC 的整个驱动不明显，驱动都在分散放在 MVC 的各个层上面。
数据劫持在 Model 层，render() 放在 View 层，事件绑定放在 Controller 层。驱动并不能成为一个集合。

如果要形成集合，要有专门的驱动管理模块来统一管理这些驱动。而在开发层面给用户所需要的就是提供一个写 template 的地方，然后是写数据的地方，然后写事件处理函数的地方。这个驱动管理模块来完成把这些分散去 MVC 的各个层中。

这个 驱动管理模块 就是 MVC 演变到 MVVM 的过程。
MVVM 是解决了 MVC 驱动不集中不内聚的方式，同时更加解决视图与模型之间完全隔离。
把数据管理、模版渲染管理和事件处理绑定管理都放在一起集中，形成了 ViewModel。所以开发者只关注 M 数据/逻辑 与 V 视图就行了。

Vue 关注于视图渲染，但是存在 ref 可以操作 DOM 即 View 层。这与完整的 MVVM 模型强制 M 与 V 分离有所违背。
Vue MV -> ViewModel Whatever
Vue 是参照 MVVM 模型的设计思路，但不是 MVVM 框架