VUE前端框架介绍（基础）

冷不防 2021-12-07 12:51 500阅读 0赞

一、设计模式（MVC/MVP/MVVM）的区别  
1、Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式MVVM框架。

设计模式（MVC/MVP/MVVM）的对比

（1）MVC （Model View Controller ）：  
a、视图（View）：用户界面。  
b、控制器（Controller）：业务逻辑  
c、模型（Model）：数据保存  
![各部分之间的通信方式如下：][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]  
MVC特点：  
a、用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。  
b、用户也可以直接向 Controller 发送指令，再由 Controller 发送给 View。  
c.、Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。

(2)、MVP（Model View Presenter）：  
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

![各部分之间的通信方式如下：][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]  
MVP特点：  
a、各部分之间的通信，都是双向的。  
b、View 与 Model 不发生联系，都通过 Presenter 传递。  
c、 View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

(3)、MVVM（ Model-View-ViewModel ）：  
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。  
![各部分之间的通信方式如下][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]  
MVVM特点：  
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。VUE采用这种模式。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211207/89295832a55643e6a0942572bcc8ae85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20211207/936acda4811e47f3a8fb2bc269022866.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]: /images/20211207/c6a486d679e9401eb19bdf55eb4198db.png