Vuejs设计与实现 — 渲染器核心：挂载与更新

前言

挂载与更新是 渲染器 的核心功能，也是渲染器应该要提供的基本功能，而挂载和更新又是基于 VNode 虚拟节点的，因为 VNode 节点描述了其对应的 真实 DOM 应该是什么样子的。

挂载与卸载

VNode 节点

无论是 vue 还是 react 都引入了 虚拟 DOM，只不过它们定义 虚拟 DOM 的结构不同，但本质上都只是一个普通的 JavaScript 对象。

VDOM 和 VNode 是从 本质上 看是一个东西，因为 VDOM 由 VNode 节点组成，每个 VNode 节点也能代表局部 VDOM，上篇文章中也提到过：VNode 和 VDOM 是可以互换的。

但从 整体上 看显然 VDOM 是包含或者等于 VNode，也就是说从严格意义上来讲，它们并不是一直相等的，取决于你的 VNode 节点的个数，如果它的节点数量是 1 那么它们是相等的。

不过现在所谈论的 VNode 就是 VDOM，谈论的 VDOM 就是 VNode，这只不过是一个简单的概念，不必过于纠结。

下面是 Vue3.x 中定义最基本的 VNode 结构：

vnode.type 是节点类型：标签、文本、注释、Fragment、Component 等
vnode.props 是节点属性数据：HTML Attributes 和 DOM Properties

const vnode = {__v_isVNode: true,__v_skip: true,type,props,key: props && normalizeKey(props),ref: props && normalizeRef(props),scopeId: currentScopeId,slotScopeIds: null,children,component: null,suspense: null,ssContent: null,ssFallback: null,dirs: null,transition: null,el: null,anchor: null,target: null,targetAnchor: null,staticCount: 0,shapeFlag,patchFlag,dynamicProps,dynamicChildren: null,appContext: null} as VNode

设置正确的元素属性

HTML Attributes 和 DOM Properties

HTML Attributes 指的就是定义在 HTML 标签上的属性，如：id="app"、type="text"、value="hello world" 等等
DOM Properties 指的是通过 JavaScript 来访问真实 DOM 元素时能够访问到的属性，很多 HTML Attributes 都能在 DOM Properties 上存在同名属性（如：el.id、el.title）等，不同名属性（如：el.className、el.textContext）等
核心原则：HTML Attributes 的作用是设置 DOM Properties 的 初始值

正确处理普通的 props

通过 in 操作符判断 props.key 是否存在 el（即 DOM Properties） 上
- 若存在则优先设置 DOM Properties，即 el[props.key] = props.value
- 若 不存在 则通过 el.setAttribute(key, value) 完成属性设置
- 针对只读属性的 DOM Properties，不能直接进行赋值，因此也必须转换为 el.setAttribute(key, value) 的处理，如：<input form="form1"> 中的 form 属性就是只读属性
  源码中抽离了 shouldSetAsProp 用于去判断是否可通过 DOM Properties 去更新：

在这里插入图片描述

特殊处理 class

Vue.js 对 class 做了增强：

指定 class 为普通 字符串
指定 class 为一个对象
指定 class 为包含上述两种类型的数组

由于 class 的值以多种形式存在，因此需要对 class 进行一些特殊处理，将 class 的值统一为字符串的形式，因为 HTML 只接收这样的 class

源码中通过 normaliz 处理不同的 class 类型，并统一返回字符串形式：

在这里插入图片描述

选择设置 class 最合适的方式

浏览器中设置 class 的方式有三种：el.className、el.classList、el.setAttribute，既然有多种方式，那么在选择时肯定要选择最优的设置方式，而其中最优的方式就是 el.className

可以做个小测试，时间不一定准确，但是差值却很明显：

const body = document.documentElement;console.time('className：')
for (let i = 0; i < 1000; i++) {body.className += i;
}
console.timeEnd('className：')console.time('setAttribute：')
for (let i = 0; i < 1000; i++) {body.setAttribute('class', body.className + ' ' + i); 
}
console.timeEnd('setAttribute：')console.time('classList：')
for (let i = 0; i < 1000; i++) {body.classList.add(i+''); 
}
console.timeEnd('classList：')// 输出结果：
className：: 5.760009765625 ms
setAttribute：: 651.76611328125 ms
classList：: 1750.427978515625 ms

事件处理

区分事件

在虚拟 DOM 中，事件可以被看作是一种特殊的属性，在 vue 中约定 vnode.props 对象中，凡是以字符串 on 开头的属性都视为事件.

const vnode = {type: 'div',props: {onClick: () => {alert('hello');}},children: 'click here'
}

注册和更新事件

注册事件 通过 el.addEventListener 的方式进行注册即可，那如何实现 更新事件 呢？

最简单的方法：

移除之前的事件处理函数
重新绑定 新的事件处理函数

但这种方式并不是最优的方式，毕竟需要来回 移除、注册 才能实现事件更新，有没有什么方法是可以只注册一次事件，也能实现事件更新的方式呢？

确实有，vue 中也是这么设计的：

伪造一个事件处理函数 invoker.value，将真正的事件处理函数设置为 invoker.value 属性的值
事件绑定时，先从 el._vei 读取对应的 invoker，若不存在，则将伪造的 invoker 作为事件处理函数，并将它缓存到 el._vei 属性中
将真正的事件处理函数赋值给 invoker.value 属性，把伪造的 invoker 函数作为事件处理函数绑定到元素上
事件触发时，实际上执行的是伪造的 invoker 函数，而 invoker 事件处理函数中会执行 invoker.value() 即真正的事件处理函数
事件需要进行更新时，直接将 invoker.value 的值重新赋值即可，不需通过 removeEventListener 移除事件
当然若事件更新时确实属于事件移除操作，则还是需要通过 removeEventListener 移除事件