本文介绍了虚拟DOM和Diff算法。虚拟DOM是模拟真实DOM节点结构的Object对象模型，文中阐述了其使用流程，包括获取数据、创建vdom、初次渲染、数据更改后重新渲染等。还介绍了Diff算法，它用于比对两次vdom，生成patch对象，能根据key更新页面改变结构，体现虚拟DOM的惰性原则。
虚拟dom && diff算法 （ 王者 ）
- 虚拟dom是什么？
- 虚拟dom的使用基本流程
- diff算法是什么？
- diff算法运行结束之后，返回什么？
注意： vue是一是MVVM框架，Vue高性能的原因之一就是vdom
深化： Vue vdom vs React vdom 有何不一样？
vdom是什么？
它是一个Object对象模型，用来模拟真实dom节点的结构
需求： vdom如何模拟真实dom，如果将来我想在增加一个li，里的内容为 ： 这里是北京大学
在增加10个li,内容为： xxx
<div class = "box">
- 这里是1903
-
var list = document.querySelector( ‘.list’ )
var li = document.createElement( ‘LI’ )
li.innerHTML = ’ 这里是北京大学 ’
list.appendChild( li )
vdom的使用流程
\1. 获取数据
*/
// 1.获取数据（ ajax fetch ）
var data = {
id: 1,
name: ‘1903’
}
// 2. 创建vdom
var vdom = {
tag: ‘div’,
attr: {
className: ‘box’
},
content: [
{
tag: ‘ul’,
content: [
{
tag: ‘li’,
content: data.name
}
]
}
]
}
//3. 初次渲染 vdom( vdom渲染成 真实dom )
// var div = document.createElement(‘DIV’)
// div.className = ‘box’
// var ul = document.createElement(‘UL’)
// var li = document.createElement(‘LI’)
// vue中使用的是一个叫做jsx语法 + render函数
var vdom = {
tag: ‘div’,
attr: {
className: ‘box’
},
content: [
{
tag: ‘ul’,
content: [
{
tag: ‘li’,
content: data.name
}
]
}
]
}
// 4. 将vdom渲染成真实dom
// render函数
// 5. 数据更改了， data.name = ‘骏哥’
data.name = ‘骏哥’
vdom = {
tag: ‘div’,
attr: {
className: ‘box’
},
content: [
{
tag: ‘ul’,
content: [
{
tag: ‘li’,
content: data.name
}
]
}
]
}
// render 函数进行渲染
// 但是我们的网页结构一般都是很复杂的，这时我们使用vdom去模拟dom结构，发现vdom这个对象模型
// 太大了，也长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好了，所以结合了javascript + xml 搞出了一个新的语法糖 jsx ，用jsx来模拟vdom
/*
<div class = "box">
- {{ data.name }}
-
*/
使用diff算法比对两次vdom,生成patch对象
/*
diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）
diff算法来源后端
前端将其应用于虚拟dom的diff算法
vue中将 虚拟dom的diff算法放在了 patch.js文件中
使用js来进行两个对象的比较（ vdom 对象模型）
diff算法是同级比较
给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）
*/
// 7. 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）
扫一扫
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
