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

274 阅读2分钟


作者: Marc Backes                          翻译:张全玉

许多开发人员将这些响应式框架(例如Vue.jsReact.jsAngular.js)视为“魔术”,因为它们确实很神奇。 但是事实并非如此。 实际上,重新创建类似Vue的功能并不那么困难,我想在本系列中向您证明这一点,在该系列中,我们逐步创建了一个响应式框架(或者至少是它的原型),类似于Vue 2在内部的工作方式。

我只有1年的Vue.js工作经验,但是我参加了Evan You本人提供的8小时课程(在阿姆斯特丹我学会了Vue.js的内部工作原理并使我真正地 了解幕后的“魔术”是如何工作的。该博客系列旨在教给那些对我在那个奇妙的研讨会上学到的东西感兴趣的人。

学习线路

  1. 简介

  2. 虚拟DOM基础

  3. 实现虚拟DOM与渲染

  4. 响应式

  5. 总结

准备材料

为了构建我们的原型,我们实际上只需要两个部分:

  • 虚拟DOM

  • 响应式

虚拟DOM

💡 DOM = 文档对象模型,网站的HTML结构 💡 VDOM = 结构的代表副本

从本质上讲,虚拟DOM(VDOM)是一种轻量级JavaScript数据格式,用于表示在给定时间点上实际DOM的外观。

这意味着将渲染逻辑与实际DOM分离。 这有助于在非浏览器上下文中重用它(例如,考虑服务器端渲染)。

此外,拥有VDOM可使更新UI的性能更高。 您可以使用JavaScript的全部功能来操纵虚拟DOM(创建节点,克隆节点,检查节点等),这确实非常快,当您完成操纵后,只需更新实际DOM中的元素即可。

在我们的小项目中,我们将创建自己的功能来创建虚拟DOM,以及如何将其呈现为实际的DOM(渲染器)。

响应式

拥有VDOM之后,我们需要编写响应式。 这是使我们的系统对状态变化做出反应的一组函数和类。

简单来说,当状态发生变化时,我们会收到通知,以便我们可以做一些事情。 最后的结果是将VDOM渲染为实际的DOM。我们的实验到此为止, 这将是用理论证明Vue.js

下一步是什么⚡️

在接下来的几周中,我会尽量写一个全面的指南,以便您可以更好地了解Vue.js的魔力所在。 一旦了解了底层的功能,您肯定会更好地了解整个框架。

敬请期待😉