社区编辑申请
注册/登录
Vue.js设计与实现之十二-渲染器的核心功能:挂载与更新01
开发 前端
在本文中主要讲述了如何实现虚拟DOM节点转成真实DOM树上,最终挂载到挂载点上。讨论了虚拟节点是如何挂载到DOM树,又是如何从DOM树上卸载的,对于属性又是如何在元素上进行设置的。

1、写在前面

在本文中主要讲述了如何实现虚拟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。

责任编辑:姜华 来源: 前端一码平川
相关推荐

2022-06-20 22:37:25

Linux操作系统命令

2022-06-15 11:51:14

Vue3开发避坑

2022-04-04 16:53:56

2022-05-17 08:39:05

VueViteTypeScript

2022-06-15 09:01:41

2022-06-23 09:22:57

Vue技巧前端

2022-06-07 14:15:44

Vue开发工具

2022-06-15 16:16:21

分布式数据库鸿蒙

2022-05-19 14:57:30

CSS代码工具

2022-04-01 10:41:09

Vue.js开发工具

2022-04-06 11:27:05

harmonyeTS 开发NAPI开发

2022-04-20 09:07:04

2022-05-09 11:19:12

CSS函数开源

2022-06-20 15:19:51

前端监控方案

2022-06-16 07:32:38

VSCodePython插件

2022-04-18 10:37:01

鸿蒙操作系统开发工具

2022-06-16 15:54:32

前端

2022-06-13 06:33:04

浏览器浏览器插件

2022-05-31 10:30:16

元宇宙数字人高清渲染

2022-06-02 14:27:05

UI框架JS

同话题下的热门内容

手把手教你用装饰器扩展 Python 计时器IOC-Golang 的 AOP 原理与应用Vue 里,多级菜单要如何设计才显得专业?分析了 700 万份工作需求,市场需求最高的八种编程语言是这些Vue 2.7 正式发布,代号为 Naruto手把手教你实现一个 Python 计时器2022 年编程语言趋势:Swift、Kotlin 热度持续增长,收入最高的五种语言竟是它们分布式事务(Seata) 四大模式详解

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号