虚拟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的惰性原则 )