vnode就是Vue 中的 虚拟 dom 。为什么会有虚拟 DOM 这么一个概念呢?
因为 JS 引擎是单线程的,而直接频繁的操作和渲染 DOM 时,又是比较消耗性能的,所以由此引发的思考就是:能不能用 JS 先进行一系列的计算和整合,再 patch 到 真实的DOM 上,这样极大地利用了 JS 执行速度快的优势,也能减少直接操作 DOM,从而达到能够很好地提高性能的这样一个目的。然后 vnode就诞生了。
vnode 是用 JS 对象来模拟的一个 DOM 树结构,在真实的 DOM 节点发生改变时,将改变映射到vnode,然后利用 diff 算法和key对vnode进行比对,比对出最小改动最小的 DOM,最后异步渲染将改变最终对应到真实的 DOM 上,即以最小的成本来更新 DOM。
Vue 利用 vnode这样的一个 JS 对象,一方面对 DOM 结构有了一份 JS 解析,一方面在接收到 DOM 修改时,生成一份新的 vnode,Vue 能够利用这份新 vnode 与旧 vnode 进行比对,在直接修改 DOM 之前,做一层拦截和过滤,帮助 Vue 在渲染 DOM 时,提高了性能。