前端框架，vue3的理解

第一个问题，前端没有框架之前是怎么做的？

早些时候就是用 Dreamweaver 写 html 静态页面，然后部署到一台电脑的 IIS (Internet Information Services) 上。当请求这个页面时，返回这个 html 文件。
具体流程为：
首先浏览器解析 html 文件构建 DOM 树，然后解析 CSS 文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。除了表现之外，我们还需要与页面交互，所以离不开 JS，而 JS 的解析和运行是由浏览器中的 JS 引擎来完成，最有名的就是2008年由 Google 发布的 V8。

所以，跑在浏览器的代码无外乎这三种：HTML + CSS + JS。

• HTML(HyperText Markup Language)
  全称是超文本标记语言，它不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

• CSS(Cascading Style Sheets) 全称是层叠样式表，它是用来样式化和排版网页的 ——例如更改网页内容的字体、颜色、大小和间距，将内容分割成多列或者加入动画以及别的装饰型效果。它通过选择器选中上面提到的 HTML元素，然后为选中的元素添加颜色，间距等样式。

• JS(JavaScript) 是一种具有函数优先的轻量级、解释型编程语言。可以让页面动起来，做到用户与前端交互，前端与后端的交互。

至此便可以构建一个我们能看到新闻的前端页面，每刷新一次网页，整个流程就重新走一遍再进行一次全局的渲染。那怕是一个很小的数据请求也要全局渲染。

2005 年诞生的 Ajax，促进了前后端的分离。可以实现无刷跟新。

第二个问题，前端框架的诞生对页面布局做了那些改进？

框架诞生以前，网页需要通过HTML + CSS + JS三者的反复结合来缔造页面，每一个页面甚至里面的布局模块都需要很多个文件糅合在一起，避免不了在项目过大时会凸显出文件繁琐，代码复用低等特点。

框架1.0，MVC 的模式

视图（View）：用户界面

控制器（Controller）：业务逻辑

模型（Model）：数据模型

View 作为用户界面，发送指令给 Controller，Controller 要求 Model 改变状态，同时 Model 把更新过的数据发送给 View 反馈给用户。

MVC 模型最核心的一点就是 所有通信都是单向的。

生活当中，MVC 的设计思想很多地方都有所体现，以家用微波炉为例，可以将它也理解成三层结构。微波炉的外观以及上面的操作摁钮就是"视图层"（view），而其内部的微波产生装置磁控管则是"数据层"（Model），这里的"数据"可以理解成"核心功能"。把操作摁钮的指令转化为对磁控管的操作则是由“控制器层”的电路板来实现的。如果现在要给微波炉更换一个新潮的外壳，或者更换一个更大功率的磁控管，完全可以在不更改其他层的情况下实现。

每一层都是独立的，这就是 MVC 模式的最大优势。

框架2.0 ，MVVM模式

MVVM 同样是一种软件架构模式，它是在 MVC 的基础上演进过来的，去掉了 MVC 中的 Controller，增加了数据的双向绑定。
最有代表性的框架就是 Google 公司推出的 Angular， 它的风格属于 HTML 语言的增强，核心概念就是数据双向绑定。

angularJS的特性如下：
　　　　1.良好的应用程序结构
　　　　2.双向数据绑定
　　　　3.指令
　　　　4.HTML模板
　　　　5.可嵌入、注入和测试
　　　　
优点：

1. 模板功能强大丰富，自带了极其丰富的angular指令。
2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
3. 自定义指令，自定义指令后可以在项目中多次使用。
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点：

1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
5. DI 依赖注入 如果代码压缩需要显示声明.

框架3.0，MVVC模式

优点：

1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3. 不支持IE8：

第三个问题、为什么要学vue3？

技术优势

• 轻量级框架：只关注视图层，是一个构建数据的视图集合
• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
• 视图，数据，结构分离：使数据的更改更为简单，
• 不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
• 虚拟DOM：不再使用原生的dom操作节点，极大解放dom操作
• 运行速度更快:相比较与react而言，vue存在很大的优势

相比于React压缩后大概是35kb；Angular压缩后大概是60Kb左右；而Vue压缩后大概是20kb ，所以说更加轻量。
而且是一个渐进式的框架：意思就是你不需要学习完Vue的全部知识，
做项目的时候，你可以用到什么就学习什么。
响应式更新机制，就是说当我们的数据更新之后，视图会自动的刷新。我们不需要像React那样comentupdata 去进行一个性能优化，我们的这个响应式更新机制它已经在底层去帮我们去处理这些事情。
我们学习Vue的成本低，因为它的一个模板语法是基于HTML的，如果说你有HTML的一个基础，可以很快的去上手Vue的框架。

第四个问题，学vue3需要那些基础？

框架的好处就是给你写了很多定义好的API，你只需要去调用使用就好，只是提高了你的工作的便捷性。
所以你该有的基础还是要有的，

HTML + CSS + JS基础的布局还是要学的，Ajax无刷异步更新界面的创建过程及语法、webpack JavaScript模块打包器、nodejs下的npm包管理。

前路漫漫，前端是一个紧跟时代的岗位，终身学习是避免不了的……

从0到1需要的是突破，强调的是自身底层的升级，从1到100需要的积累，注重的是自身格局和能力的打开。