MVC + MVVM

1. MVC

1. MVC 是一种软件架构模式,也有人叫做设计模式

2. M : Model 数据模型 (专门用来操作数据,数据的 CRUD)

3. V : View 视图 (对于前端来说,就是页面)

4. C : Controller 控制器 (是视图和数据模型沟通的桥梁,用于处理业务逻辑)

5. 看图

2. MVVM

Vue 使用的是 MVVM 模式 为什么要学习 MVVM ?

• MVVM ===> M / V / VM

• M : model 数据层

• V : view 视图层

• VM : ViewModel 视图模型

• 核心 : M <===> VM <===> V

3.MVVM 优势

• MVC 模式 将应用程序划为三个部分,实现职责分离

  • 但是,在前端中,经常要通过 js 代码来进行一些逻辑操作,最终还要把这些逻辑操作展示页面中, 也需要频繁的操作DOM

  • DOM是前端性能的瓶颈

  • 比如 : ajax 请求、添加、修改、设置样式、动画

• MVVM 提出来的思想 通过 数据双向绑定 让数据自动的双向同步

  • V (修改视图) --> M

  • M (修改数据) --> V

4. Vue 中的 MVVM

• 注意 : 不推荐直接手动操作 DOM

  每个人操作 DOM 的方法不一样,会造成性能不一样 官网 : 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

5. 学习 Vue 要转化思想

• 采用的是 : 数据驱动视图的思想, 数据是核心

• 以后如果想要操作 DOM, 立马想到的不是应该是拿到元素设置,而是数据

• 数据驱动视图 : 不要再想着怎么操作 DOM, 而是想着如何操作数据

•