Vue.js中的虚拟DOM

一.节点和状态

在我们平常对DOM操作的时候,之前在vue没有诞生之前,以命令式的方式对DOM进行操作,页面上的每一个元素都可以看做成一个节点状态。

二.剔除和渲染

框架都有自己渲染的方式,假设一个页面的状态,随着Ajax请求的放松,状态发生改变,有以下的两种方式供你选择：

1.将前面所有的节点都清空,重写渲染新的节点。

2.只更新更改的部分。

从性能上看,只更新更改的部分,也许是最优解,因为这样大大减少了计算机的缓存，每一个节点都需要去通过监听。

三.什么是虚拟节点树

刚才讲了传统的操作页面的方式,通过命令式的一步步操作,虚拟DOM通过状态生成一个虚拟节点树，虚拟节点树其实是由组件树建立起来的整个虚拟节点(vnode)树。

四.渲染的流程

1.我们使用通过模板来描述状态和DOM之间的关系,

模板<---------------->DOM   

2.通过编译模板将模板转换成渲染函数

模版------------------------>编译------------------->渲染函数(render)

3.执行渲染函数

渲染函数(render)----------------------->执行------------------->虚拟节点树(vnode)

4.虚拟节点树使用

虚拟节点树------------->使用------------------------>渲染页面

如果直接使用的话会覆盖旧的节点,

这个时候进行会存在对比

oldVnode和vnode进行对比,vnode是一JavaScript一个普通的对象。

通过patch算法得到一个新的虚拟节点树,来进行更新,达到最佳优化。