一.节点和状态
在我们平常对DOM操作的时候,之前在vue没有诞生之前,以命令式的方式对DOM进行操作,页面上的每一个元素都可以看做成一个节点状态。
二.剔除和渲染
框架都有自己渲染的方式,假设一个页面的状态,随着Ajax请求的放松,状态发生改变,有以下的两种方式供你选择：
1.将前面所有的节点都清空,重写渲染新的节点。
2.只更新更改的部分。
从性能上看,只更新更改的部分,也许是最优解,因为这样大大减少了计算机的缓存，每一个节点都需要去通过监听。
三.什么是虚拟节点树
刚才讲了传统的操作页面的方式,通过命令式的一步步操作,虚拟DOM通过状态生成一个虚拟节点树，虚拟节点树其实是由组件树建立起来的整个虚拟节点(vnode)树。
四.渲染的流程
1.我们使用通过模板 来描述状态和DOM之间的关系,
模板<---------------->DOM
2.通过编译模板将模板转换成渲染函数
模版------------------------>编译------------------->渲染函数(render)
3.执行渲染函数
渲染函数(render)----------------------->执行------------------->虚拟节点树(vnode)
4.虚拟节点树使用
虚拟节点树------------->使用------------------------>渲染页面
如果直接使用的话会覆盖旧的节点,
这个时候进行会存在对比
oldVnode和vnode进行对比,vnode是一JavaScript一个普通的对象。
通过patch算法得到一个新的虚拟节点树,来进行更新,达到最佳优化。