搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > web学习笔记 > 从头开始创建自己的Vue.js—第2部分(虚拟DOM基础)

从头开始创建自己的Vue.js—第2部分(虚拟DOM基础)

web学习笔记 2020-06-25

这是从头开始创建Vue.js系列文章的第二部分,在这里我教您如何创建诸如Vue.js之类反应式框架的基础。在第一部分中,描述了我们需要的部分以及遵循的路线图。如果您还没有阅读过,建议您在阅读本文之前先阅读。

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

路线图🚘

1.介绍2.虚拟DOM基础(本文)3.实施虚拟DOM和渲染4.构建反应式5.总结

什么是虚拟DOM?

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

💡VDOM =该结构的代表性副本

虚拟DOM是将真实DOM表示为JavaScript格式的一种形式,它比每次发生更改时都操纵真实DOM更加容易。

如果您不想将DOM呈现给浏览器,而是呈现给一个字符串(例如,在服务器端呈现时很方便),它也很有用。

虚拟节点

因此,虚拟DOM由虚拟节点组成,在我们要编写代码的示例中,虚拟节点将类似于以下内容:

{
   tag'div',
   props: {
       class'container'
  },
   children: [
      {
           tag'h1',
           props: {},
           children'Hello World'
      },
      {
           tag'p',
           props: {},
           children'Lorem ipsum dolor sit amet.'
      }
  ]
}

上面的示例等效于以下HTML代码:

<div class="container">
   <h1>Hello World</h1>
   <p>Lorem ipsum dolor sit amet.</p>
</div>

因此,所有虚拟节点由以下组成:

  • 作为字符串的HTML标记

  • 属性对象

  • 子级列表可以是:

    • 另一个节点

    • 文本(表示内容)

虚拟DOM骨架

在我们的示例中,我们将不会构建一个成熟的虚拟DOM“引擎”,但足以理解基础知识。

让我们看看虚拟DOM的编码。我们将把所有未来的代码建立在以下几行上。因此,创建一个包含以下内容的HTML文件:

<div id="app"></app>
<script>

   // Create virtual node
   function h(tagpropschildren) {
       // Return the virtual node
  }

   // Mount a virtual node to the DOM
   function mount(vnodecontainer) {
       // Create the element
       // Set props
       // Handle children
       // Mount to the DOM
  }

   // Unmount a virtual node from the DOM
   function unmount(vnode) {
       // Unmount the virtual node
  }

   // Take 2 vnodes, compare & figure out what's the difference
   function patch(n1n2) {
       // Case where the nodes are of the same tag
       // Case where the new vnode has string children
       // Case where the new vnode has an array of vnodes
       // Case where the nodes are of different tags
  }

   function render(message) {
       // Render a virtual node with a given message
  }

   // Create virtual nodes & render them below this line...
</script>

如您所见,我们有五个不同的函数,它们都在创建和呈现虚拟DOM

  • h函数创建一个虚拟节点(但尚未将其装载到真实DOM中)。我将其称为h,因为在Vue.js项目中也是如此。

  • mount函数将采用给定的虚拟节点并将其装载到真实DOM中的给定容器。对于第一个元素,这将是我们在文件顶部创建的#app节点。

  • unmount将虚拟节点从父节点中删除虚拟节点。

  • patch目前为止我们为VDOM编写的最大功能。这是因为我们必须比较两个不同的节点,并以递归方式检查所有差异(以递归方式对所有子节点执行此操作)。

  • renderrender函数的简化版本。在我们的示例中,它使用给定的消息创建了各种虚拟节点(我们稍后对其进行了更改,以演示我们的VDOM“引擎”的工作方式)。

下一步做什么

在第1部分中,我们了解了构建自己的类似Vue.js框架所需的构建部件,在这一部分中,我们了解了如何构建虚拟DOM的基础知识。

在下一章中,我们将实际实现完整的虚拟DOM部分。

敬请期待😉



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《从头开始创建自己的Vue.js—第2部分(虚拟DOM基础)》的版权归原作者「web学习笔记」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注web学习笔记微信公众号

web学习笔记微信公众号:just_so_so_00

web学习笔记

手机扫描上方二维码即可关注web学习笔记微信公众号

web学习笔记最新文章

精品公众号随机推荐