🚀🚀
🌞:一个虚拟DOM的demo分享
🔫:zZhiqg的主页
🍉:嘿 也许你和我一样~
只是学习过程中的笔记啦,还望指正错误
前景提要
🐶狗哥前段时间给我分享了一个demo
🥙至此,我对虚拟DOM的疑问告一段落
下面把demo分享给大家
demo展示
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一张草稿纸</title>
</head>
<body>
// 创建一个root作为一个根节点
<div id="root"></div>
<script type="text/javascript">
// 这个vnode就是一个虚拟的DOM,实际上就是一个javascript对象
const vnode = {
tag: "div",
children: [{
tag: "span",
children: "nihao"
}, {
tag: "span",
children: "zzq"
}]
}
// vnode 添加到页面
function Render(obj, root) {
// DOM操作,新建元素
const el = document.createElement(obj.tag)
if (typeof obj.children == "string") {
const text = document.createTextNode(obj.children)
el.appendChild(text)
} else if (obj.children) {
obj.children.forEach(item => {
// 递归的调用 妙极了!!
Render(item, el)
})
}
// 新增DOM到root节点上
root.appendChild(el)
}
// 获取到root节点
const root = document.getElementById('root')
// render开始
Render(vnode, root)
</script>
</body>
<style>
</style>
</html>
关于虚拟DOM我想说
🎨🎨
先前对于虚拟DOM只能说知道有这么个东西,且它能够转化成"真实DOM"展现在界面上
但是具体是怎么实现的,实在是一头雾水
而这段demo就是将虚拟DOM转化成"真实DOM"的一个实现过程
后续的探究
🎈🎈
到这里,😀回过头看看Vue官方文档对Vue渲染的解释
哈哈,才知道原来vue的<template>
模板也是虚拟DOM,先前还以为这个里面就是写的html链接在这
<template>
最后其实也会编译成render
函数