前端框架，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.可嵌入、注入和测试
优点：
- 模板功能强大丰富，自带了极其丰富的angular指令。
- 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
- 自定义指令，自定义指令后可以在项目中多次使用。
- ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
- angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。
缺点：
- angular 入门很容易 但深入后概念很多, 学习中较难理解.
- 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
- 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
- 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
- DI 依赖注入 如果代码压缩需要显示声明.
框架3.0，MVVC模式
优点：
- 简单：官方文档很清晰，比 Angular 简单易学。
- 快速：异步批处理方式更新 DOM。
- 组合：用解耦的、可复用的组件组合你的应用程序。
- 紧凑：~18kb min+gzip，且无依赖。
- 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
- 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点：
- 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
- 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
- 不支持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需要的积累，注重的是自身格局和能力的打开。