尽管我们可以从逻辑上简单的将 Vue
的实现拆分为:响应式系统和渲染器。因为现代前端框架所关注的问题就是如何同步 state
与 UI
。
但在实际工程中,UI
的渲染并不是一次性的。根据数据的变化,它是会随之不断变化的。从理论上来说,我们可以对数据的变化应收尽收。也就是说,只要 state
发生了变化,我们就去更新 UI
。这种罗永浩式不管不顾的做法尽管也不是不能用,但却会大大降低渲染更新的速度。所以我们就需要一种机制,来控制渲染。
任何逻辑只要足够通用、足够复杂,就有价值抽象出来单独研究。
另外的,调度器与调度策略是一个很复杂的问题。在操作系统设计中,你可能看到过很多精妙的设计与研究。这里我们并不打算过于深入这个主题,而是恰到好处的阐述,来完成我们的工程目标。
如果你使用 JavaScript
或 TypeScript
开发,那你就不能不去了解运行它们的环境。我们可以笼统的将运行环境区分为浏览器和 Node.js
。在这篇文章,我们的讨论范围仅限于浏览器中。
一个在展开讨论前的必要信息是:JavaScript
是一个单线程语言。这意味着在任何时候,都只能有一个主线程来处理任务。事实上这个设计不能怪 Brendan Eich,JavaScript
语言的设计者。他当年捣鼓这个东西的时候,也没有想到互联网能发展成今天这个样子。
如果我们考虑单线程这件事,我们会意识到,这个设计会带来灾难性的后果。比如用户在网站上发起了一个网络请求,这个网络请求所需要的时间可能长达几秒,在这期间,整个网站的渲染线程是被挂起的,从用户的角度来看,网站就像卡住了。这种浏览体验可能是所有用户都不愿意见到的。
说到这,你可能会想:不对啊,我平常上网怎么没遇到过这种情况?的确没有,这就要归功于 Event Loop
了。
简单来说,Event Loop
这个设计,使得浏览器可以将 JavaScript
代码中 同步 和 异步 任务区分开。这种设计是有重大意义的。这使得浏览器可以在处理诸如网络请求这种高延时工作的时候,依然可以为用户提供流畅的渲染体验。