第 8 章挂载与更新(1)

霍春阳（HcySunYang）

第 8 章　挂载与更新在第 7 章中，我们主要介绍了渲染器的基本概念和整体架构。本章，我们将讲解渲染器的核心功能：挂载与更新。
8.1　挂载子节点和元素的属性第 7 章提到，当 vnode.children 的值是字符串类型时，会把它设置为元素的文本内容。一个元素除了具有文本子节点外，还可以包含其他元素子节点，并且子节点可以是很多个。为了描述元素的子节点，我们需要将 vnode.children 定义为数组：
 const vnode = {
   type: 'div',
   children: [
     {
       type: 'p',
       children: 'hello'
     }
   ]
 }
上面这段代码描述的是“一个 div 标签具有一个子节点，且子节点是 p 标签”。可以看到，vnode.children 是一个数组，它的每一个元素都是一个独立的虚拟节点对象。这样就形成了树型结构，即虚拟 DOM 树。
为了完成子节点的渲染，我们需要修改 mountElement 函数，如下面的代码所示：
 function mountElement(vnode, container) {
   const el = createElement(vnode.type)
   if (typeof vnode.children === 'string') {
     setElementText(el, vnode.children)
   } else if (Array.isArray(vnode.children)) {
     // 如果 children 是数组，则遍历每一个子节点，并调用 patch 函数挂载它们
     vnode.children.forEach(child => {
       patch(null, child, el)
     })
   }
   insert(el, container)
 }
在上面这段代码中，我们增加了新的判断分支。使用 Array.isArray 函数判断 vnode.children 是否是数组，如果是数组，则循环遍历它，并调 patch 函数挂载数组中的虚拟节点。在挂载子节点时，需要注意以下两点。
传递给 patch 函数的第一个参数是 null。因为是挂载阶段，没有旧 vnode，所以只需要传递 null 即可。这样，当 patch 函数执行时，就会递归地调用 mountElement 函数完成挂载。
传递给 patch 函数的第三个参数是挂载点。由于我们正在挂载的子元素是 div 标签的子节点，所以需要把刚刚创建的 div 元素作为挂载点，这样才能保证这些子节点挂载到正确位置。
完成了子节点的挂载后，我们再来看看如何用 vnode 描述一个标签的属性，以及如何渲染这些属性。我们知道，HTML 标签有很多属性，其中有些属性是通用的，例如 id、class 等，而有些属性是特定元素才有的，例如 form 元素的 action 属性。实际上，渲染一个元素的属性比想象中要复杂，不过我们仍然秉承一切从简的原则，先来看看最基本的属性处理。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文深入介绍了渲染器的核心功能——挂载与更新，并重点讨论了挂载子节点和元素属性的方法，以及HTML Attributes 和 DOM Properties 之间的差异和关联。特别强调了在设置元素属性时的特殊处理方法，如表单元素的form属性，以及class属性的处理和卸载操作。通过简洁清晰的代码示例和图示，帮助读者全面理解了渲染器的关键功能和相关概念。文章还强调了在处理HTML Attributes 和 DOM Properties时需要注意的细节和特殊情况，对开发者在实际项目中处理元素属性设置和渲染过程具有重要的指导意义。此外，文章还介绍了卸载操作的重要性以及如何正确进行卸载操作，包括建立虚拟节点与真实 DOM 元素之间的联系，以及封装卸载操作到unmount函数中的方法。同时，还讨论了区分不同类型的虚拟节点，并根据不同类型的虚拟节点采取相应的处理方式的重要性，为读者提供了全面的渲染器相关知识。总的来说，本文通过深入讨论渲染器的核心功能和相关概念，为读者提供了全面的指导，使其能够更好地理解和应用渲染器的相关知识。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue.js 设计与实现》

立即购买

登录后留言

精选留言

由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。

收起评论

第 8 章 挂载与更新(1)

第 8 章 挂载与更新

8.1 挂载子节点和元素的属性

精选留言

第 8 章挂载与更新(1)

第 8 章　挂载与更新

8.1　挂载子节点和元素的属性