开篇词

1. 全面系统学习算法、设计模式、编译原理等计算机课程；
2. 渐进式学习Vue3；
3. 学习Vue3原因：帮助开发者高效学习开发前端；
4. Vue3:组合式API、响应式、虚拟DOM、运行时、编译优化、组合式API、基于Proxy的响应式系统等；
5. Vue3和React知识地图

6.如何学习Vue3？

• 没有Vue2经验，vite+Option了解模版语法
• 有Vue2经验，直接上手CompotionAPI
• 学习路线

课程导读

01 | 宏观视角：从前端框架发展史聊聊为什么要学Vue 3？

前端历史

1. 石器时代

   1990 年，第一个 Web 浏览器诞生了。这是前端这个技术的起点，代表这一年它出生了。后面的时间里，前端圈有很多里程碑事件。 1994 年，网景公司发布第一个商业浏览器 Navigator。 1995 年，网景工程师 Brendan Eich 用 10 天时间设计了 JavaScript，同年微软发布了 IE 浏览器，进而掀起了浏览器大战。 2002 年，IE 在浏览器大战中赢得胜利，IE6 占有率超过 96% 。 整个 90 年代，受限于网速，网页都是静态页，显示非常单一，前端的工作大部分都只是让美工来切切图和写写 HTML+CSS。也因此，在 90 年代，前端还处在一种萌发期的状态，前端工程师这一工种也没有明确出现。再后来，后端越来越复杂，开始分层。就像在小公司里，大家啥都干，但公司规模大了之后，就要分部门，职责明确，代码也从揉在一起发展到 Model，View 和 Controller，分别负责不同的功能。整个 90 年代，受限于网速，网页都是静态页，显示非常单一，前端的工作大部分都只是让美工来切切图和写写 HTML+CSS。也因此，在 90 年代，前端还处在一种萌发期的状态，前端工程师这一工种也没有明确出现。再后来，后端越来越复杂，开始分层。就像在小公司里，大家啥都干，但公司规模大了之后，就要分部门，职责明确，代码也从揉在一起发展到 Model，View 和 Controller，分别负责不同的功能。

2.铁器时代

JQuery一把梭 3.工业时代 MVVM AngularJS、Node.js

前端三大框架：

数据发生变化后，我们怎么去通知页面更新。各大框架在这个步骤上，各显神通。

• Angular 1 就是最老套的脏检查。所谓的脏检查，指的是 Angular 1 在对数据变化的检查上，遵循每次用户交互时都检查一次数据是否变化，有变化就去更新 DOM 这一方法。这个方法看似简单粗暴，但算是数据驱动页面早期的实现，所以一经推出，就迅速占领了 MVVM 市场。
• 后面 Angular 团队自断双臂，完全抛弃 Angular 1，搞了一个全新的框架还叫 Angular，引入了 TypeScript、RxJS 等新内容，虽然这些设计很优秀，但是不支持向前兼容，抛弃了老用户。这样做也伤了一大批 Angular 1 用户的心。这也是 Angular 这个优秀的框架现在在国内没有大面积推广的原因。
• 而 Vue 1 的解决方案，就是使用响应式，初始化的时候，Watcher 监听了数据的每个属性，这样数据发生变化的时候，我们就能精确地知道数据的哪个 key 变了，去针对性修改对应的 DOM 即可，这一过程可以按如下方式解构：

在上图中，左边是实际的网页内容，我们在网页中使用{{}}渲染一个变量，Vue 1 就会在内容里保存一个监听器监控这个变量，我们称之为 Watcher，数据有变化，watcher 会收到通知去更新网页。

• 此外，Facebook 的 React 团队提出了不同于上面的 Angular、Vue 的的解决方案，他们设计了 React 框架，在页面初始化的时候，在浏览器 DOM 之上，搞了一个叫虚拟 DOM 的东西，也就是用一个 JavaScript 对象来描述整个 DOM 树。我们可以很方便的通过虚拟 DOM 计算出变化的数据，去进行精确的修改。

参考

极客时间 玩转Vue3全家桶 盛鑫晶 大圣