虚拟DOM 和 Diff 算法
- 什么是虚拟DOM?
- vdom可以看作是一个使用javascript模拟了DOM结构的树形结构,这个树结构包含整个DOM结构的信息
var vdom1 = {
tag: 'DIV',
attr: {
className: 'box'
},
children: [{
tag: 'UL',
children: [{
tag: 'LI',
content: '1',
attr: {
className: 'item'
}
}, {
tag: 'LI',
content: '1',
attr: {
className: 'item'
}
}, {
tag: 'LI',
content: '1',
attr: {
className: 'item'
}
}]
}]
}
-
使用虚拟DOM有什么好处?
-
越多的真实dom操作,越损耗性能
-
操作数据要大大的减少性能损耗,提高渲染效率
-
-
什么是Diff 算法?
- diff算法是比较两个文件的差异,并将两个文件不同之处,将这个不同之处生成一个补丁对象(patch)
- diff算法来源后端
- 前端将其应用于虚拟dom的diff算法
- vue中将 虚拟dom的diff算法放在了 patch.js文件中
- 使用js来进行两个对象的比较( vdom 对象模型)
- diff算法是同级比较
- 给每一个层级打一个标记,这个标记是一个数字( 这个数字就是 key )
-
diff算法是用来做什么的?
** Vue 2.x版本使用的就是 VDOM ( 虚拟DOM ) **
-
VDOM的渲染流程
- 获取数据
- 根据数据创建VDOM (相当于给对象赋值)
- 根据VDOM渲染生成真实DOM ( 根据createElmeent(‘DIV’) )
- 当数据发生改变后,又会生成新的VDOM
- 通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来,然后在进行真实DOM渲染,
一样的内容是不会进行渲染的,这就是VDOM 的 ‘就地复用’ | ‘惰性原则’
-
jsx 在vue采用的原因
VDOM对象树态繁琐了, 如果能像hom结构一样书写就好了, 这就引入了 jsx
-
render函数是做什么的
但是jsx始终还是不能直接去用的,必须转换成 对象 才能使用,
vue中 使用render 函数 解析jsx语法, 然后换成 对象结构 ,在通过 createElment 生成节点,渲染成
真实DOM