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

大圣



该思维导图由 AI 生成，仅供参考

你好，我是大圣。
今天，我们来聊一聊前端框架的发展历史。在熟悉这段历史之后，相信你能把握到 Vue 在前端框架中的地位。这样，你就会对 Vue 有一个更精准的定位，从而能够知道我们为什么要选择 Vue 框架，以及 Vue 的优势和它的真正价值在哪里。
同时，前端框架的发展历史可能也会让你感触很多。因为每一个上网的人，或多或少都会感觉到前端网页在这些年发生了很多的变化，这是一种切身的、直观的体会。我们都能感觉到网页在设计模式、渲染等等地方的变化，而这种种变化的背后，其实都可以放到前端框架的演变历史中来解释。
石器时代谈前端框架发展史之前，我们先来简单回顾一下前端的发展历史吧。
1990 年，第一个 Web 浏览器诞生了。这是前端这个技术的起点，代表这一年它出生了。后面的时间里，前端圈有很多里程碑事件。
1994 年，网景公司发布第一个商业浏览器 Navigator。
1995 年，网景工程师 Brendan Eich 用 10 天时间设计了 JavaScript，同年微软发布了 IE 浏览器，进而掀起了浏览器大战。
2002 年，IE 在浏览器大战中赢得胜利，IE6 占有率超过 96% 。
而前端的发展历史，又非常直观地显示在你看到的前端网页的演变历史中。整个 90 年代，受限于网速，网页都是静态页，显示非常单一，前端的工作大部分都只是让美工来切切图和写写 HTML+CSS。也因此，在 90 年代，前端还处在一种萌发期的状态，前端工程师这一工种也没有明确出现。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

前端框架发展历史与技术特点本文深入探讨了前端框架的发展历史和技术特点，从浏览器诞生、Ajax技术应用到前端工业革命的兴起，全面呈现了前端技术的演变和革新。文章介绍了前端三大框架Angular、React、Vue的发展主线，重点阐述了Vue和React在数据更新通知和性能优化方面的差异。此外，还介绍了Vue 2引入虚拟DOM解决内存占用问题，以及Vue 3的全面升级。作者提出了思考题，探讨了Vue是否需要React的Fiber。整体而言，本文以宏观的视角，为读者呈现了前端框架的发展历史，为学习和理解Vue3提供了有益的背景知识。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(90)

最新
精选

洛一
置顶
怎么加群
编辑回复: 你好，加群的链接在课程详情页中有哦，戳链接加入交流群吧
2021-10-19
13
8
徐洲更
置顶
光这一篇就觉得值回票价了！之前都不知道怎么入手前端，看完这段历史才知道了学习方向。迫不及待后面的内容了
作者回复: 感谢夸奖，坚持学完肯定更有收获嘿嘿
2021-10-19

66
CondorHero
Vue 不需要 React 的 Fiber，因为更新系统中的 Watcher 控制在组件级。
作者回复: 你好，回答正确，不过原因并不是Watcher的级别，而是虚拟Dom控制在组件级，最早Vue3的提案其实是包含时间切片方案的，最后废弃的主要原因，是时间切片解决的的问题，Vue3基本碰不到 1. Vue3把虚拟Dom控制在组件级别，组件之间使用响应式，这就让Vue3的虚拟Dom不会过于庞大 2. Vue3虚拟Dom的静态标记和自动缓存功能，让静态的节点和属性可以直接绕过Diff逻辑，也大大减少了虚拟Dom的Diff事件 3. 时间切片也会带来额外的系统复杂性所以引入时间切片对于Vue3来说投入产出比不太理想，在后来的讨论中，Vue3的时间切片方案就被废弃了希望能帮到你
2021-10-18
10
200
杨村长
我来回答思考题: vue的diff被限制在组件级，这样每次变化影响的只是一颗子树，相对范围较小。所以fiber带来的收益似乎也会降低，fiber要改架构还可能破坏目前稳定的表现。因此不需要。
作者回复: 村长威武
2021-10-19
4
64
天择
请问老师，react的fiber是如何实现的，有浏览器接口吗？怎么知道渲染线程在空闲呢？
作者回复: 浏览器提供了一个api叫requestIdleCallback, 会在空闲的时候通知你，https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback 由于这个api兼容性问题，React自己实现了一个
2021-10-18

29
xzq
看了之后有两个点我和大圣老师的观点有点不一样： 1. 引入虚拟dom的核心并不是为了通过diff得出需要更新的节点从而加快速度(有时候甚至会变慢)。而是给各种类型节点提供了一层向上的抽象，这种抽象扩展了框架能够完成的功能，和简化了一些操作。在大多数情况下，操作最快的永远是直接操作Dom，这个svelte 好像就是这么做的。 2. Vue2.x 中并不是仅仅只有组件级别的watcher ，每个组件中的响应式数据也有watcher，在对应的deps上。只不过组件内部数据的watcher一般只会通知到组件级别的watcher, 然后由组件级别的watcher通知外部做对应的操作。
作者回复: 很赞的分享 1. 其实让diff更快和支持跨端这两个都算是虚拟Dom diff带来的有点，到底哪个才是核心的也没必要区分，而且虚拟Dom精确的来说并不是更快，而是复杂度上去之后性能不崩盘，svelte项目大了之后其实代码体积会变得比较大 2。我想表达的就是只有一个渲染Watcher，如果组件内部配置了watch啥的其实也都会有
2021-10-26
5
21
William
树形结构的diff很难中断，请问有什么依据吗？
作者回复: 树形结构的Diff用的是递归，递归本身就不太好中断，你可以脑补一下如果两棵树做对比，再一个节点停下来了，你需要记录的是层级，别的节点的状态等
2021-10-18
2
19
Geek_3beb80
由于vue只在组件级别diff，单个组件过于庞大会影响diff效率，过小会增加wacher的数量，改如何取舍呢
作者回复: 你在设计组件的时候主要考虑功能即可，Vue有点像自动挡，很多优化都帮你做了，尽量不要拆的太碎，因为虚拟Dom 是做了很多静态优化的，只要按照功能模块拆即可
2021-10-21

12
刷子iNG
感觉懂了，但是细想来还是不懂，给自己占坑，希望学完后能解决自己的疑问： 1.vue1 的 watcher 指的是 Object.defineProperty 吗？数据变化之后在 setter 里面去更新对应的dom？ 2.当数据变更后，是怎么通知react更新虚拟 dom 的呢？不需要 watcher 吗？ 3.为什么vue2引入了虚拟dom就能解决响应式数据过的内存问题呢？vue 中的data不都是响应式的吗？当dom过多虚拟dom就没有性能问题吗？ 4.什么叫组件的变化通过响应式的更新，内部数据的变化通过虚拟dom去更新，不都是数据驱动视图更新，两者的差异是怎么实现的呢？ watcher 是什么？
作者回复: 1. 可以这个理解，不过setter也有一些优化策略 2. react不是直接修改数据，而是使用setState这种函数去操作，可以在函数内部去完成通知 3. 引入虚拟Dom后，一个组件一个Watcher，组件内部虚拟Dom，组件的量级不会大到diff时间超过16。6ms 5. 组件之间的数据更新，是通过响应式去通知，组件内部没有响应式的wathcer，而是通过虚拟Dom更新
2021-10-22
2
11
Mserke
请问 Vue 2 引入虚拟 DOM 给 Vue 带来了跨端的能力，这句话怎么理解呢？
作者回复: 虚拟Dom带来的能力，就是我们可以使用JSON描述Vue项目，我们可以基于这个JSON，在小程序渲染，在app上渲染，这是Vue1没有的能力
2021-10-23
2
10

收起评论