许多开发人员看到这些反应性框架,例如
Vue.js, React.js, Angular.js
是“魔法”,因为他们做的很好,因为它看起来是魔法。但事实并非如此。事实上,重建类 Vue 功能并不是那么困难,我想在本系列中向您证明这一点,在本系列中,我们将逐步创建一个响应式框架(或者至少是它的原型),类似于Vue 2的内部工作方式。
为了建立我们的原型,我们实际上只需要两个主要部分:
❝在gist中,虚拟DOM (VDOM)是一种轻量级的JavaScript数据格式,用于表示在给定时间点实际DOM应该是什么样子。 ❞
这意味着将呈现逻辑与实际的DOM解耦。这有助于在非浏览器上下文中重用它(例如考虑服务器端呈现)。
另外,拥有一个VDOM可以提高UI更新的性能。您可以使用JavaScript的全部功能(创建节点、克隆节点、检查节点等)来操作虚拟DOM,这非常快,并且当您完成操作时,只需更新实际DOM中的元素。
在我们的小项目中,我们将创建自己的功能来创建虚拟DOM,以及如何将其呈现给实际的DOM (renderer)。
一旦我们有了VDOM,我们需要编写我们的反应性。这是一组函数和类,让我们的系统对状态变化作出反应。
简单地说,当状态改变时,我们会得到通知,这样我们就能做一些事情。最后将VDOM呈现为实际的DOM。这就是我们的实验结束的地方。这将是我们自己的迷你vue.js的概念验证
在接下来的几个星期里,我将尝试写一篇尽可能全面的指南,这样你就能很好地了解Vue.js的魔力到底是什么。一旦你理解了框架背后的内容,你肯定会有更好的时间来理解整个框架。