1、为什么要学习流行框架？
企业：为了提高效率，因为时间就是金钱。开发人员：提高了开发效率发展进程：JS=>JQuery=>模板引擎=>框架时代（Angular(2+)、React、Vue）好处：不用直接操作DOM，更多关注业务逻辑
2、前端框架与库的区别？
功能层面框架：提供全方位功能，是比较齐全的库：以提供API为主，像JQuery提供了大量的API，[框架]是提供基础性的服务为主，vue有虚拟Dom的支持，有双向数据绑定的支撑，像这些呢，都会一些基础性的服务，可以提升开发效率。jquery库：操作DOM+网络请求 => 比如获取按钮，给按钮绑定事件…等
代码层面- 库：是为了实现某个功能，而调用某个函数 => 如：使用轮播图时，引入轮播图的库放置到代码中使用
- 框架：帮助我们运行编写好的代码
- 步骤1：初始化框架自身的一些行为 => 框架要运行，必须要先跑起来
- 步骤2：执行你编写好的代码 => 由框架来帮助执行
- 步骤3：释放一些资源；
总结库：单一某个层面，可以任何地方调用库，也是可以替代的，在pc端使用jquery库，在移动端可以使用更轻量级的zepto来实现dom操作框架：大而沉，把代码给框架去执行。是一套完整的解决方案；对项目的侵入性较大，我们的代码是只写代码段的，不会写完整的页面，会把自己写的代码段交给框架，让框架帮我们跑起来，项目如果需要更换框架，则需要重新架构整个项目，因为它不如库这么灵活
3、MV*架构模式是什么？
解释：MV是指好几种架构模式，这里的*是泛指，是指mv开头的一系列架构模式，而vue框架就属于这种框架模式(MVVM)的一种核心思想：都是将应用分层。拆解名词：MV系列架构中，M和V分别指Model层和View层，但其功能会因为框架的不同而变化。- Model层是数据模型，用来存储数据；
- View层是视图，展示Model层的数据。
- 总结：虽然在不同的框架中，Model层和View层的内容可能会有所差别，但是其基础功能不变，变的只是 数据的传输方式
4、Web1.0时代
Web1.0时代：前/后端未分离阶段，在Web1.0时代，并没有前端的概念。- 开发一个应用多数采用ASP.NET/Java/PHP编写，项目通常由多个.aspx/.jsp/.php文件构成，每个文件同时包含了HTML、CSS、JavaScript、C#/Java/PHP代码。
服务端比较重：- 有些内容横跨服务端和客户端。
- JSP在服务端生成，调用server获取数据，在jsp页面中进行封装，把前端的代码混成一个，返给前端。
优势及劣势：- 这种架构的好处是简单快捷，但是，缺点也非常明显：JSP代码难以维护，前后端未分离，混合在一起，没有前端的概念，后端人员责任较重。
4.1、后端MVC
- 为了让开发更加便捷，代码更容易维护，前后端职责更清晰，便衍生出了
MVC开发模式和框架。 - 典型的框架就是
Java(Spring、 Structs、 Hibernate)、.Net（ASP.NET MVC）。 - 这时的
MVC仅限于服务端
4.1、存在问题
- 前端页面
开发效率不高=> 后端人员兼顾前端开发，页面效果又不是很完美 - 前后端
职责不清=> 一定的分离，未彻底分离，view层，依赖jsp实现模板文件的渲染
5、Web2.0时代—当前时代
- 自从
Gmail的出现，Ajax技术风靡全球。- 有了
Ajax技术之后，前/后端的职责更加清晰了，因为前端可以通过Ajax与后端进行数据交互。
1
6、前端MVC(Model-View-Controller)
前端的MVC与后端类似，M（Model）模型，V（View）视图，C（controller）控制器。- 它是MVC、MVP、MVVM这三者中最早产生的架构，其他两个架构模式是以它为基础发展而来的。
6.1、存在问题
数据流混乱，可维护性太差。控制器可以修改模型，模型变了，会修改视图；但是也会有视图变了，修改模型。最后是视图修改的模型，还是控制器该的模型，不确定。- 由于很多开发者会在view层写逻辑代码，导致
view层庞大，而控制层Controller变得单薄（就是简单的数据监听，再调用model层的更改逻辑）。 - 在前端开发中，缺少MVP开发模式，是因为AngularJS早早的将MVVM架构模式带入了前端。MVP模式在前端开发中并不常见，但是在安卓、IOS等原生开发中，比较常见。
7、MVP（Model-View-Presenter）
- 传统的MVC模式虽然可以管理页面系统中的数据，视图，控制器，但是在视图层创建界面时常常会用到模型层内的数据，使模型层和视图层耦合在一起，降低了复用性和灵活性。
- MVP与MVC很接近，P指的是Presenter, Presenter可以理解为一 个中间人，它负责着View和Model之间的数据流动，防止View和Model之间直接交流。
7.1、存在问题
- 由于View层和Model层都需要经过Presenter层，导致Presenter层比较复杂，维护起来也会有一定的问题；
- 而且，因为没有绑定数据，所有数据都需要Presenter层进行“手动同步”，代码量较大，虽然比起MVC框架好很多，但还是有比较多冗余部分。
8、MVVM模式
- 为了让View层和Model层的数据始终保持一致，MVVM框架出现了。
- MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel(视图模型)
MVVM是这样分割的：M、V、VM。- 上图中最右边的就是
M—>model，最左边就是V—>View，中间就是VM—>ViewModel，VM起到连接HTML和JSON数据的桥梁作用。 - 如果JSON数据层改变，那么就通过VM在内存中维护的 虚拟 DOM 重新点对点刷新 View 界面，点对点起到提高效率作用；
- 然后，如果View的某个地方有数据改变，比如用户在input标签里输入内容，有数据变动，那么就映射到Model里面，这就是VM的监听作用。
8.1、特性
数据驱动视图- 好处：当Model层发生数据变化时，页面会自动重新渲染。开发人员只维护好数据的变化，页面结构会被VM会自动渲染出来。
- ViewModel通过实现一套数据响应式机制自动响应ModeI中数据变化，同时，Viewmodel会实现一套更新策略自动将数据变化转换为视图更新。
- 注意：数据驱动视图是单向的数据绑定
双向数据绑定- 前面学习原生JS时，表单收集用户输入，通过ajax提交数据。
- 用户在填写表单时，双向数据绑定可以帮助开发人员在不操作DOM的前提下，自动把用户填写的内容同步到数据源中
- 页面中的input值发生变化，vm会自动把最新的值取出来，更新到数据。
- 好处：开发人员不再需要手动操作DOM元素，来获取表单元素输入的最新值；js数据的变化，会被自动渲染到页面上。
9、总结
- 这三个
架构模式，反应了前端领域的发展进程，共同目标都是职责划分（分层），解决model层和view的耦合度问题，切分成功能鲜明的各个层，提高可读性和可维护性。 MVC模式出现较早主要应用在后端，如Spring MVC、ASP.NET MVC等，随着Ajax出现，有了纯粹的前端。它的优点是分层清晰，缺点是数据流混乱，灵活性不高，带来维护性问题。MVP模式在是MVC的进化形式，Presenter作为中间层负责MV通信, 解决了两者耦合问题,但P层过于臃肿会导致维护问题。MVVM模式在前端领域有广泛应用。 跟MVP 架构对比：MVVM中ViewModel层把Model层和View 层的数据同步自动化了，解决了 MVP 架构中数据同步比较麻烦的问题，不仅减轻了ViewModel 层的压力，同时使得数据处理更加方便，只需告诉View 层展示的数据是Model 层中的哪一部分即可。Vue.js是一个提供了MVVM 风格的双向数据绑定的Javascript 库，专注于View 层，它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。