虚拟dom && diff算法
175 浏览量
2021-01-08
14:16:57
上传
评论
收藏 50KB PDF 举报
虚拟虚拟dom && diff算法算法
千锋逆战班，Rayson.Jin学习打卡！
今天给大家介绍一下虚拟dom和diff算法。
一、虚拟一、虚拟dom是什么是什么
1.它是一个Object对象模型，用来模拟真实dom节点的结构
（虚拟dom其实是里面内存型对象（js内存对象） 属于内存数据 真实dom的一层映射）
2.提供一种方便的工具，使得开发效率得到保证
3.保证最小化的DOM操作，使得执行效率得到保证
二、虚拟二、虚拟dom的使用基本流程（前四步骤）的使用基本流程（前四步骤）
1.获取数据
2.创建vdom
3.将vdom渲染成真实dom
4.数据更改了
5.使用diff算法比对两次vdom，将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
6.根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）
//1.获取数据
var data = {
arr:[] }
//2.内存中生成一颗虚拟dom树，创建vdom
2
var vDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"}}
] }
//3.将内存中的虚拟dom树初始化渲染成真实dom树
//4.更改数据
data.arr.push("
111
")
data.arr.push("
222
")
//5.使用diff算法比对两次vdom，将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
var newDom = {
tag:"div",
attr:{
id:"content"
},
children:[
{tag:"p",content:2},
{tag:"ul",attrs:{className:"list-group"},children:[
{tag:"li",content:"11111"},
{tag:"li",content:"22222"}
]}
] }
//6.将对比出来的差异的部分进行重新真实dom结构的渲染
三、三、diff算法是什么算法是什么
用来做比对两次vdom结构
四、四、diff算法运行结束后，返回算法运行结束后，返回key
weixin_38734492
- 粉丝: 5
- 资源: 972
最新资源
- 细胞的奇迹：吃出来的免疫力（美亚畅销书！作者的TED演讲播放量超300万次！《谷物大脑》作者、《三联生活周刊》推荐！吃下对的食物，改善你的... (Z-Library).azw3
- 智能手机产品拆解，使用mindmaster打开
- 11111111111111
- 统信系统ARM64依赖openssl-1.0.2版本的libssl.so.10和libcrypto.so.10文件
- 奥比中光python sdk
- 冯超楠17.py
- OCR识别-基于视觉注意力机制Attention实现的OCR识别算法-附项目源码-优质项目实战.zip
- Java 使用蒙特卡洛方法估算PI的近似值（源代码）
- main.cpp
- 电子木鱼小程序源码电子木鱼小程序源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0