MVC 、MVVM 以及 Vue.js 概述

MVC 框架

MVC 框架全称为 Model - View - Controller 的缩写，即 模型 - 视图 - 控制器，是后端分层开发的概念。

1. 【模型】是指后端数据。
2. 【视图】是指前端页面。
3. 【控制器】是指页面业务逻辑，作用是读取视图数据，控制用户输入，并向后端发送数据，属于单向通信。

MVVM 框架

随着前端开发越来越受到重视，前端又将 MVC 中的 V 细分出了 MVVM 框架，全称为 Model - View - ViewModel ，即 模型 - 视图 - 视图模型。

1. 【模型】是指后端传输的数据在前端页面上进行的备份。

2. 【视图】是指前端展示的页面。

3. 【视图模型】是 MVVM 的核心，是连接【视图】和【模型】的桥梁，有两个方向，两个方向都能实现的，叫做双向数据绑定。

   1. 将【模型】转化为【视图】，即将数据展示到页面上，属于数据驱动，其中 Vue 采用的方法是【数据劫持 - 发布者和订阅者】模式。
   2. 将【视图】转化为【模型】，即将前端数据传递给后端，采用的方法是 DOM 事件监听。

MVC 和 MVVM 的区别

MVVM 是前端视图层的概念，把前端的视图层拆分成了三个部分 Model，View，ViewModel。
MVC 是后端分层开发的概念，把整个前后端拆分成 Model，View，Controller。

Vue.js 概述

Vue.js 是什么

1. Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，拥有非常容易上手的 API；
2. Vue.js是一个构建数据驱动的 Web 界面的库。

Vue.js 的特性

1. 轻量级的框架
2. 双向数据绑定
3. 指令
4. 插件化（组件化）

Vue 的开发模式

1. 使用 script 引入 vue.js 文件
2. 使用 vue-cli 手脚架工具搭建 Vue 项目架构

Vue.js 的优点

1. 简单轻巧，功能强大，拥有非常容易上手的 API；
2. 可组件化 和 响应式设计；
3. 实现数据与结构分离，高性能，易于浏览器的加载速度；
4. MVVM 模式，数据双向绑定，减少了 DOM 操作，将更多精力放在数据和业务逻辑上。