您现在的位置是：亿华云 > 系统运维
Vue.js设计与实现之十二-渲染器的核心功能：挂载与更新01
亿华云2025-10-02 18:53:05【系统运维】9人已围观
简介1、写在前面在本文中主要讲述了如何实现虚拟DOM节点转成真实DOM树上，最终挂载到挂载点上。讨论了虚拟节点是如何挂载到DOM树，又是如何从DOM树上卸载的，对于属性又是如何在元素上进行设置的。2、挂载
在本文中主要讲述了如何实现虚拟DOM节点转成真实DOM树上，现之渲染最终挂载到挂载点上。核心讨论了虚拟节点是功能挂载更新如何挂载到DOM树，又是计实如何从DOM树上卸载的，对于属性又是现之渲染如何在元素上进行设置的。
2、核心挂载子节点和元素的功能挂载更新属性在上篇文章中，在vnode.children值为字符串时，计实将其设置为元素的现之渲染文本内容，当vnode.children值为数组时，核心表示其有子节点需要遍历设置。功能挂载更新我们知道vnode是计实一个虚拟DOM节点，vnode.children是现之渲染一个虚拟DOM树，其每个元素都是核心一个虚拟DOM节点。
const vnode = {
type:"div",
//props是标签的属性
props:{
id:"super"
},
children:[
{
type:"p",
children:"pingping"
}
]
}上面的代码是虚拟DOM树形结构，如果要实现将虚拟VNode转为真实DOM，需要通过挂载和渲染。可以通过mountElement函数实现节点的渲染：
function mountElement(vnode, container){
const el = createElement(vnode.type);
//处理children
if(typeof vnode.children === "string"){
// 字符串转为标签的高防服务器文本内容
setElementText(el, vnode.children)
}else if(Array.isArray(vnode.children)){
//虚拟DOM节点数组 需要遍历每个节点进行挂载
vnode.children.forEach(child=>{
patch(null,child,el);
})
}
// 在标签上添加属性
if(vnode.props){
for(const key in vnode.props){
// 调用setAttribute在元素上设置属性
el.setAttribute(key, vnode.props[key]);
// 也可以使用DOM对象直接设置属性
// el[key] = vnode.props[key];
}
}
insert(el, container);
}在上面代码片段中，首先会根据vnode.type的值创建DOM节点，children的值判断为string类型时，直接将其设置为元素的文本内容;children的值判断数组时，则对数组内的虚拟DOM节点进行遍历，调用patch函数挂载节点。
在挂载阶段patch是没有旧vnode的，对此传递的第一个参数是null，而在patch函数执行时会递归调用mountElement函数完成挂载。而patch传递的第三个参数是虚拟节点要挂载的根节点，完成挂载后需要给元素遍历设置属性。
3、正确地设置元素属性如何正确地设置元素属性，就得先了解HTML Attribute和DOM Properties的差异和关联。我们知道HTML Attribute是定义在HTML标签元素上的属性，浏览器会将其解析创建一个对应的DOM对象，这个对象上包含许多属性(DOM Properties)。站群服务器
HTML Attribute的作用是设置与之对应的DOM Properties初始值，当值发生改变时，DOM Properties始终存储着当前值，那么通过getAttribute获取到的也是初始值。
HTML Attribute和DOM Properties。然而在使用Vue.js的单文件模板不会被浏览器解析，此时需要框架自己进行解析。会影响DOM属性的添加方式，浏览器会解析普通HTML元素代码，自定分析HTML Attribute设置合适的DOM Properties。然而在使用Vue.js的单文件模板不会被浏览器解析，此时需要框架自己进行解析。
那么，看看在Vue.js是如何实现的：
const renderer = createRenderer({
//创建元素
createElement(tag){
return document.createElement(tag);
},
//设置元素的文本节点
setElementText(el, text){
el.textContent = text;
},
//用于给指定父节点添加指定元素
insert(el, parent, achor = null){
parent.insertBefore(el, anchor);
}
// 将属性设置相关操作进行封装，作为渲染器选项进行传值
patchProps(el, key, prevValue, nextValue){
if(shouldSetAsProps(el, key, nextValue)){
const type = typeof el[key];
if(key === "class"){
//采用el.className方式设置clas，是因为其性能相对于setAttribute和el.classList更高
el.className = nextValue || "";
}else if(type === "boolean" && nextValue === ""){
el[key] = true;
}else{
el[key] = nextValue;
}
}else{
el.setAttribute(key, nextValue);
}
}
})在上面代码中，shouldSetAsProps函数用于分析属性是否应该作为DOM Properties属性被设置，返回的是亿华云一个布尔值。当返回一个true值时，表示应该作为DOM Properties被设置，否则就应该使用setAttribute函数设置属性。在设置属性时，需要优先设置元素的DOM Properties，当其值为空字符串时，需要将其矫正为true。
在mountElement函数中，只需要调用patchProps函数传递参数即可：
function mountElement(vnode, container){
const el = createElement(vnode.type);
//处理children
if(typeof vnode.children === "string"){
// 字符串转为标签的文本内容
setElementText(el, vnode.children)
}else if(Array.isArray(vnode.children)){
//虚拟DOM节点数组 需要遍历每个节点进行挂载
vnode.children.forEach(child=>{
patch(null,child,el);
})
}
// 在标签上添加属性
if(vnode.props){
for(const key in vnode.props){
patchProps(el, key, null, vnode.props[key])
}
}
insert(el, container);
}在上面代码片段中，mountElement函数会检查每个vnode.props中的属性，调用patchProps函数去设置DOM Properties。
4、卸载操作在前面两节中，讨论了如何将虚拟DOM挂载到挂载点上，是通过createRenderer函数结合mountElement实现的。而卸载操作发生在更新阶段，即初次挂载完成之后，后续渲染触发的更新。
//初次挂载
renderer.render(vnode, document.querySelector("#app"));
// 再次挂载新vnode，触发更新 当传递的是null，则进行卸载之前的操作
renderer.render(vnode, document.querySelector("#app"));
//renderer.render(null, document.querySelector("#app"));在初次渲染完毕后，后续渲染时如果传递的是null作为新vnode，则表示需要卸载当前所有渲染的内容。
在上一篇文章中，使用innerHTML设置为空作为清空容器元素内容的方案是存在缺陷的，因为它不会移除绑定在DOM元素上的事件处理函数。对此，需要先根据vnode对象获取到与之关联的真实DOM元素，使用原生DOM操作方法将其进行移除。
function unmount(vnode){
const parent = vnode.el.parentNode;
if(parent){
parent.removeChild(vnode.el);
}
}unmount函数接收一个虚拟节点作为参数，并将该节点对应的真实DOM元素从父元素上移除。
注意：在新旧vnode描述内容不同时，即vnode.type的属性不同时，两个vnode之间就不存在打补丁的意义，此时应该使用unmount函数先将旧元素进行卸载，再将n1的值重置为null，最后将新元素进行挂载到容器中。
当然，即使新旧vnode描述内容相同，也要判断两者的类型是否相同，vnode可以描述普通标签也可以描述组件，对于不同类型的vnode需要使用不同的挂载或打补丁方式。
function patch(n1, n2, container){
if(n1 && n2.type !== n1.type){
unmount(n1);
n1 = null;
}
const { type } = n2;
if(typeof type === "string"){
if(!n1){
mountElement(n2, container);
}else{
patchElement(n1, n2);
}
}else if(typeof type === "object"){
// n2.type是object对象类型，则描述的是组件
}else if(type === "xxx"){
//处理其他类型vnode
}
}5、写在最后挂载子节点只需要递归调用patch函数即可实现挂载，而节点属性的设置就取决于被设置属性的特点。在卸载操作时，通过直接使用innerHTML清空容器元素是存在诸多问题的，对此封装了一个新的卸载函数unmount。
很赞哦!（3）
