虚拟DOM 和 Diff 算法
- 什么是虚拟DOM?
- 所谓的virtual dom,也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM节点.
- 为什么使用虚拟dom?(使用虚拟DOM有什么好处?)
- 越多的真实dom操作,越损耗性能
- 操作数据要大大的减少性能损耗,提高渲染效率
注意:vue优化的一个好处就是使用了虚拟dom
#### 虚拟dom的渲染流程
1. 获取数据
2. 根据数据创建VDOM (相当于给对象赋值)
3. 根据VDOM渲染生成真实DOM ( 根据createElmeent('DIV') )
4. 当数据发生改变后,又会生成新的VDOM
5. 通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来,然后在进行真实DOM渲染,
一样的内容是不会进行渲染的,这就是VDOM 的 '就地复用' | '惰性原则'
- 什么是Diff 算法?
- dom diff 则是通过JS层面的计算,返回一个patch对象,即补丁对象,在通过特定的操作解析patch对象,完成页面的重新渲染,
- diff算法是用来做什么的?
- 通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来,然后在进行真实DOM渲染,
** Vue 2.x版本使用的就是 VDOM ( 虚拟DOM ) **
- 通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来,然后在进行真实DOM渲染,
- 接下我们以一个案例的形式告诉大家 : 列表渲染为什么要加key?
<div id="app">
<ul>
<li v-for = " (item,index) in lists" :key = "item.id">
<p> {{ item.text }} </p>
<button @click = "del( index) "> 删除 </button>
<button @click = "change"> 修改 </button>
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
lists: [
{
id: 1,
text: '作业'
},
{
id: 2,
text: '打篮球'
}
]
},
methods: {
del ( index ) {
this.lists.splice( index, 1 )
},
change ( e ) { // 一下代码在操作DOM,但是我们知道vue中dom操作使用指令,所以下面代码不推荐使用
var li = e.target.parentNode
li.style.background = 'red'
}
}
})
- jsx 在vue采用的原因
- VDOM对象树态繁琐了, 如果能像hom结构一样书写就好了, 这就引入了 jsx
- render函数是做什么的
但是jsx始终还是不能直接去用的,必须转换成 对象 才能使用,
vue中 使用render 函数 解析jsx语法, 然后换成 对象结构 ,在通过 createElment 生成节点,渲染成
真实DOM