从头开始创建自己的Vue.js-第1部分

许多开发人员看到这些反应性框架，例如

Vue.js, React.js, Angular.js

是“魔法”，因为他们做的很好，因为它看起来是魔法。但事实并非如此。事实上,重建类 Vue 功能并不是那么困难，我想在本系列中向您证明这一点，在本系列中，我们将逐步创建一个响应式框架(或者至少是它的原型)，类似于Vue 2的内部工作方式。

路线图

介绍(这篇文章)

虚拟DOM基础知识

实现虚拟DOM和渲染

建立反应

将一切结合在一起

我们需要的东西

为了建立我们的原型，我们实际上只需要两个主要部分:

一个虚拟的DOM

反应性

Virtual DOM

DOM文档对象模型,一个网站的HTML结构

VDOM =代表结构的副本

在gist中，虚拟DOM (VDOM)是一种轻量级的JavaScript数据格式，用于表示在给定时间点实际DOM应该是什么样子。

这意味着将呈现逻辑与实际的DOM解耦。这有助于在非浏览器上下文中重用它(例如考虑服务器端呈现)。

另外，拥有一个VDOM可以提高UI更新的性能。您可以使用JavaScript的全部功能(创建节点、克隆节点、检查节点等)来操作虚拟DOM，这非常快，并且当您完成操作时，只需更新实际DOM中的元素。

在我们的小项目中，我们将创建自己的功能来创建虚拟DOM，以及如何将其呈现给实际的DOM (renderer)。

Reactivity

一旦我们有了VDOM，我们需要编写我们的反应性。这是一组函数和类，让我们的系统对状态变化作出反应。

简单地说，当状态改变时，我们会得到通知，这样我们就能做一些事情。最后将VDOM呈现为实际的DOM。这就是我们的实验结束的地方。这将是我们自己的迷你vue.js的概念验证

接下来

在接下来的几个星期里，我将尝试写一篇尽可能全面的指南，这样你就能很好地了解Vue.js的魔力到底是什么。一旦你理解了框架背后的内容，你肯定会有更好的时间来理解整个框架。

如果你喜欢我的内容和更新，你最好在Twitter上关注我。那是我经常在@_marcba下闲逛的地方